Lors de la publication de mon formulaire à partir d'un modal CSS personnalisé, les données sont publiées sur l'URL actuelle et non sur l'URL définie.

$("form.delete_photo_form").submit(function(e) 
{
    e.preventDefault();

    $(".delete_photo_message").text("");


    $.ajax({
        url: 'assets/php/delete_photo.php',
        type: 'post',
        data:  $(this).serialize(),
        success: function(data, status) 
        {
            if (data == 1)
            {
                $(".delete_photo_message").text("Unable to delete photo");
            }                           
            else if (data == 2)
            {
                $(".delete_photo_message").text("Photo deleted");
                // checkGroup();
            }                           
            else
            {
                $(".delete_photo_message").text(data);  
            }
      },
      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }
    }); 

Ce formulaire est publié à partir d'un modal ouvert par un autre modal.

Modal d'origine:

<div id="photo_buttons">

<a id="edit_photo_modal" class="button" href="#edit_photos_modal">

    Edit Photos

</a>
<div id="edit_photos_modal" class="modal_photos">
    <div>
        <a id="close_edit_photo" title="Close" href="#close"></a>


                                Edit Photos:


        <br></br>
        <br></br>
        <div class="edit_photos_div">
            <div class="photo_line">
                <img src="images/thumbnails/group/11/bb0878d2390cdcfb.jpg"></img>
                <br></br>
                <a id="edit_photo" class="open_modal" href="#modal_edit_photo_39">

                    Edit

                </a>


                                      /  


                <a id="delete_photo" href="#modal_delete_photo_39">

                    Delete

                </a>
                <br></br>
                <br></br>
            </div>                
        </div>
        <a id="finish_edit" class="button" title="Finish" href="#finish">

            Finish

        </a>
    </div>
</div>
<script src="assets/js/edit_photo.js"></script>

Second Modal (celui-ci est où le poste ajax est appelé):

    <div id="edit_modals">
    <div id="modal_edit_photo_39" class="modal">
        <div>
            <a id="close_39" title="Close" href="#close">

                Close

            </a>
            <form id="edit_photo_form_39" class="edit_photo_form" method="post" action="">
                <h4>

                    Edit Photo

                </h4>
                <br></br>
                <h3 id="edit_photo_message" class="edit_photo_message"></h3>



                                            Title:

                <input id="edit_title" type="text" value="Test photo" name="edit_title"></input>



                                            Description:

                <textarea id="edit_desc" name="edit_desc" rows="3">

                    Test for resize

                </textarea>
                <br></br>
                <input type="hidden" value="11" name="group_id"></input>
                <input type="hidden" value="39" name="photo_id"></input>
                <input id="edit_photo_yes_39" class="edit_yes" type="submit" title="Edit" value="Edit" name="edit_yes"></input>
                <a id="cancel_edit" class="button" title="Cancel" href="#cancel_edit">

                    Cancel

                </a>
            </form>
        </div>
    </div>
    <div id="modal_delete_photo_39" class="modal">
        <div>
            <a id="close_39" title="Close" href="#close">

                Close

            </a>
            <form id="delete_photo_form_39" class="delete_photo_form" method="post" action="">
                <h4>

                    Are you sure you want to delete this photo?

                </h4>
                <br></br>
                <h3 id="delete_photo_message" class="delete_photo_message"></h3>
                <input type="hidden" value="11" name="group_id"></input>
                <input type="hidden" value="39" name="photo_id"></input>
                <input id="delete_photo_yes_39" class="delete_yes" type="submit" title="Yes" value="Yes" name="delete_yes"></input>
                <a id="del_no" class="button" title="No" href="#no">

                    No

                </a>
            </form>
        </div>
    </div>        
</div>

Si quelqu'un a des idées, faites-le moi savoir.

Note latérale:

La fonction de soumission de formulaire fonctionne correctement si le deuxième modal est appelé seul et non à partir du premier.

1
PaX 20 juil. 2015 à 22:56

2 réponses

Meilleure réponse

Il est possible que vous créez dynamiquement le formulaire après l'exécution du sélecteur $("form.delete_photo_form"), ou que le script modal déplace l'emplacement du formulaire dans le DOM (c'est-à-dire que certains scripts modaux déplacent le contenu modal jusqu'à la toute fin de la balise <body>).

Dans les deux cas, cela empêcherait l'exécution de votre logique de soumission. Essayez de remplacer:

$("form.delete_photo_form").submit(<handler>);

...avec:

$(document).on("submit", "form.delete_photo_form", <handler>);

Si vous n'êtes pas familier avec la syntaxe ci-dessus, c'est la syntaxe de jQuery pour la délégation d'événements, qui vous permet de lier le gestionnaire d'événements à quelque chose de permanent (comme l'objet document), puis d'exécuter sélectivement la logique du gestionnaire si l'événement répond à certains critères (dans ce cas, l'événement doit être de type "submit" et doit provenir d'un élément correspondant au sélecteur "form.delete_photo_form"). Cela a l'avantage de vous permettre de configurer l'écouteur d'événements même si les nœuds DOM pertinents n'ont pas encore été créés.

0
jmar777 20 juil. 2015 à 20:26

Si vous n'allez pas du tout soumettre le formulaire, pourquoi ne pas utiliser la fonction onclick de votre bouton et là, dans la méthode, appelez ajax.

Essayez de prendre toutes les valeurs et envoyez-les toutes pour vérifier si elles ont quelque chose

0
Luis Josue Uscanga 20 juil. 2015 à 20:13