Discussion :

[gastoncs]

Bonsoir,

j'ai actuellement une fenêtre modale qui s'affiche lorsque je clique sur un bouton, la modale contient un formulaire, donc voici ma modale en html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="modal-content">
      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title"> </h4>
                    </div>
                    <div class="modal-body">
                        <form class="well" id="contact_form" action="modal_ajouter_inter_sql.php" method="POST">
                             <div class="form-group">Personnes présente : <br/>
 
							  <?php
                                                                $sql = 'SELECT id_membres, nom, prenom FROM membres ORDER BY nom ASC';
                                                                $exec = mysql_query($sql);
                                                                while ($data = mysql_fetch_array($exec)) { ?>
							 <div class="checkbox"><label><input class="<?php echo 'chkbox'.$data['id_membres']; ?>" type="checkbox" name="check_list[]" value="<?php echo $data['id_membres']; ?>"><?php echo $data['prenom'].' '.$data['nom']; ?></label></div>
							 <?php } ?>
 
						</div>
						<input type="hidden" name="id_inter" id="id_inter" value=""/>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                        <button type="button" id="submitForm" class="btn btn-primary">Enregistrer</button>
                    </div>
                </div>
            </div>
        </div>

lorsque j'ai coché mes cases à cocher dans le formulaire je soumet le formulaire à l'aide du bouton Enregistrer qui exécute en js ce script (en fait il s'agit du ajax $post et tout fonctionne bien):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 $("#contact_form").on("submit", function(e) {
			//on traite le form
            var postData = $(this).serializeArray();
            var formURL = $(this).attr("action");
            $.ajax({
                url: formURL,
                type: "POST",
                data: postData,
                success: function(data, textStatus, jqXHR) {
                    $('#Personne_dialog .modal-header .modal-title').empty().html("Informations");
                    $('#Personne_dialog .modal-body').empty().html(data);
                    $("#submitForm").remove();
					Affichemontableau()
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
            e.preventDefault();
        });

Une fois le formulaire soumis comme vous pouvez le voir, dans cette même modale j'inscrit en titre : "Informations" et dans le body de la modal j'inscrit le resultat de ma page php a l'aide de $('#Personne_dialog .modal-body').empty().html(data);

Tout fonctionne bien, mais lorsque j'ai soumis mon form et que je ferme la modal, la prochaine modal que j'ouvrirais contiendra encore le resultat de la requete ajax precédente, et mon form n'appraitra plu !!!

Auriez vous une idée de mon erreur, j'ai essayé empty(), ou reset() pour vider ce qui se trouve dans le body mais dans ce cas je n'ai plus rien, mon formulaire ne s'affiche pas.
Merci pour votre aide

[Invité]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

                    $("#submitForm").remove();

C'est sûr, si tu l'effaces...

C'est une question de logique.
A priori, il suffit juste de :
- masquer (.hide(0)) le formulaire au moment d'afficher le résultat.
- afficher (.show(0)) le formulaire à l'ouverture de la modale.

[gastoncs]

Non le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#submitForm").remove();

c'est juste pour ne pas afficher le bouton :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <button type="button" id="submitForm" class="btn btn-primary">Enregistrer</button>

lorsque la modale de confirmation $ajax s'affiche.

[Invité]

Pourquoi ne pas réinitialiser/afficher le formulaire via Ajax au moment de l'ouverture de la modale ?

Bref, comme je l'ai dit, c'est un problème de logique, de conception.

[gastoncs]

Oui je le conçoit qu'il y a un problème de conception, j'ai donc adapté mon code selon tes conseils, donc je charge le formulaire dans la modale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(document).on("click", ".open-PersonneDialog", function () {
//on met le formulaire a l'ouverture de la modale avec les case a coché généré en php
			$('#Personne_dialog .modal-body').empty().append('<form class="well" id="contact_form" method="POST"><div class="form-group">Personnes présente : '+
							<?php
                                                                $sql = 'SELECT id_membres, nom, prenom FROM membres ORDER BY nom ASC';
                                                                $exec = mysql_query($sql);
                                                                while ($data = mysql_fetch_array($exec)) { 
                                                                echo '+\'<div class="checkbox"><label><input class="chkbox'.$data['id_membres'].'" type="checkbox" name="check_list[]" value="'.$data['id_membres'].'">'.$data['prenom'].' '.$data['nom'].'</label></div>\'';
                                                                }
                                                                ?>
							+'</div><input type="hidden" name="id_inter" id="id_inter" value=""/></form>');

Mais maintenant lorsque je soumet le formulaire, la réponse ne s'affiche plus dans la modale, mais a la place un nouvel onglet s'ouvre dans l'explorateur avec le resultat de la page $POST executé par le form, c'est a ni rien comprendre alors que je n'ai pas modifié celui ci, juste fait un append() du form comme montré ci
dessus !

voici mon code comme je les laissé, pour le resultate du submit de la form dans la modale :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $("#contact_form").on("submit", function(e) {
			//on traite le form
            var postData = $(this).serializeArray();
            $.ajax({
                url: formURL,
                type: "POST",
                data: "modal_ajouter_inter_sql.php",
                success: function(data, textStatus, jqXHR) {
                    $('#Personne_dialog .modal-header .modal-title').empty().html("Informations");
                    $('#Personne_dialog .modal-body').empty().append("modification effectuée avec succés");
                    $("#submitForm").remove();
					Affichemontableau()
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
            e.preventDefault();
        });

[Invité]

C'est un problème d'absence dans le DOM au départ :

<form id="contact_form"...> n'est PAS présent dans le DOM.

Il faut remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $("#contact_form").on("submit", function(e) {

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $(document).on("submit", "#contact_form", function(e) {

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#Personne_dialog').on("submit", "#contact_form", function(e) {

(en supposant que le div id="Personne_dialog" est présent au départ)