jquery bootstrap, vider une modal

Version imprimable

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:

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:

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:mouarf:

23/06/2016, 12h47
Invité

Bonjour,

Code:

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

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

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.
23/06/2016, 14h30
gastoncs

Non le

Code:

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

c'est juste pour ne pas afficher le bouton :

Code:

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

lorsque la modale de confirmation $ajax s'affiche.
23/06/2016, 14h45
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.

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:

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:

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();
        });

23/06/2016, 16h21
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:

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

par

Code:

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

ou

Code:

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

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

Merci pour ton aide, j'ai donc essayé ce que tu ma conseillé, mais rien n'y fait, lorsque je clique sur

Code:

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

Rien ne se passe c'est comme ci mon formulaire n'est pas soumis en ajax.
je reste sur mon formulaire, je te met le code complet ci dessous, si par hasard tu voit quelque chose ???

Code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
 
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- titre du site -->
    <title>Sy57 : Derniéres interventions de <?php echo $var_caserne; ?></title>
	<!-- icone du site -->
	<link rel="icon" type="image/png" href="images/icone.png" />
	 <!-- Bootstrap core CSS -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
 
    <div class="container">
    	<?php include('header.php'); 
                include('config.php');
                ?>
    <div class="jumbotron">
 
				<h2>Les interventions</h2>
				</br>
 
 
<div id="montableau"></div>
 
  </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 
 
<script>
    /* must apply only after HTML has loaded */
    $(document).ready(function () {
		var centre_sec = "<?php echo $var_caserne; ?>";
		var droit_user = "<?php echo $var_groupe; ?>";
 
		Affichemontableau() //au chargement de la page on affiche le tableau
 
		//on affiche le tableau des interventions avec comme paramétre le centre d'appartenance
		function Affichemontableau() {
		$.ajax({
                url: 'table_interventions.php',
                type: "GET",
                data: 'centre='+centre_sec+'&droit='+droit_user,
                success: function(data, textStatus, jqXHR) {
							//$('#montableau').html(data);
							$('#montableau').hide().html(data).fadeIn('slow');
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
		}
 
		//concerne la consultation des intervenants
		$(document).on("click", ".open-intervenantDialog", function () {
			var myBookId = $(this).data('id');
	             $.ajax({
                url: 'modal_consulter_inter_sql.php',
                type: "GET",
                data: 'identifiant_inter='+myBookId,
                success: function(data, textStatus, jqXHR) {
						$('#Intervenant_dialog .modal-header .modal-title').empty().html("Informations");
						$('#Intervenant_dialog .modal-body').empty().html(data);
						$('#Intervenant_dialog').modal('show');
 
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
});
 
 
		//concernet l'ajout des intervenants
		$(document).on("click", ".open-PersonneDialog", function () {
			$('#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>');
			//on recoit les données de la personne
     var myBookId = $(this).data('id');
	 var arrayOfStrings = myBookId.split("$"); // on les split
	 var id_inter = arrayOfStrings[0]; 
	 var date_inter = arrayOfStrings[1]; 
	 var heure_inter = arrayOfStrings[2]; 
 
	 //on fait un ajax GET pour recuperer les checkbox qui on etait checké
 
	     $.ajax({
                url: 'modal_checkbox_inter_sql.php',
                type: "GET",
                data: 'identifiant_inter='+id_inter,
                success: function(data, textStatus, jqXHR) {
						$(".modal-header .modal-title").empty().append("Intervention du "+date_inter+" a "+heure_inter);
						$(".modal-body #id_inter").empty().val(id_inter); // on affect l'id de l'intervention dans le form en type hidden
						//on recupére le resultat du $ajax.GET pour le spliter les id membres
						var result_requete = data;
						if(result_requete){ //on regarde si la requete renvoi quelque chose alors on a des gens d'inscrit
							var arrayOfPersonnes = result_requete.split("$");
							//on parcour le tableau des membres de l'inter
							for(var i= 0; i < arrayOfPersonnes.length; i++)
								{
									//on coche les membres presents
									$(".modal-body .chkbox"+arrayOfPersonnes[i]).prop('checked', true);
								}
						}else{ //si la requete ne renvoi rien alors il n'y a personne d'inscrit pour l'inter on décoche toute les case
							// on cherche les checkbox à l'intérieur de body
							var bodye = $(".modal-body").find(':checkbox'); 
							 bodye.prop('checked', false);
						}
						$('#Personne_dialog').modal('show');
                },
                error: function(jqXHR, status, error) {
                    console.log(status + ": " + error);
                }
            });
});
 
$('#Personne_dialog').on("submit", "#contact_form", function(e) {
		   $("#contact_form").submit();
			//on traite le form
			e.preventDefault();
            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();
        });
 
       $("#submitForm").on('click', function() {
          $("#contact_form").submit();
        });
 
		$('#Personne_dialog').on('hidden.bs.modal', function () {
			var bodye = $(".modal-body").find(':checkbox'); 
			bodye.prop('checked', false);
			Affichemontableau()
		});
 
    });
</script>
 
<!-- la div pour l'ajout d'intervenant -->
        <div class="modal fade" id="Personne_dialog" role="dialog">
          <div class="modal-dialog modal-sm">
 
<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">
 
                    </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>
 
<!-- la div pour la consultation des intervenants -->
        <div class="modal fade" id="Intervenant_dialog" role="dialog">
          <div class="modal-dialog modal-sm">
 
<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">
 
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                    </div>
                </div>
            </div>
        </div>
 
</body>
</html>