Discussion :

[zerros]

Bonjour,

Je débute sur jquery alors c'est le nième message pour arriver à régler tous mes problèmes. Voilà mon problème.
Depuis une page chargé par ajax, je lance une fenêtre modale dans laquelle j'ai un formulaire.

Au submit, j'appelle une fonction qui vérifie que tous les champs du formulaire sont bien rempli. S ok, j'envoi vers une page php qui va traiter
les données, sinon, j'affiche une "alert".

Au premier lancement de la modale, pas de prob, le formulaire fonctionne parfaitement. A la fermeture de la modale, la page parente se recharge.
Une fois rechargée, je peux de nouveau ouvrir la modale pour accéder au formulaire. Et là, j'ai un souci. Je ne peux plus valider le formulaire.
il me dit que j'ai des champs vides alors que j'ai bien tout rempli.

en faisant un console.log des data, je me rends compte que la fonction que la fonction qui récupère les infos du formulaire récupère bien sur le formulaire en cours,
MAIS ajoute aussi les mêmes variables, mais vides. Ce qui correspond à un formulaire vide. Et si je lance 4 fois la modale, j'aurai 3 fois des données vides et une fois les vraie données.

exemple:
1er lancement: id=5&donnees=1
2ème lancement: id=&donnees=&id=5&donnees=1
3ème lancement: id=&donnees=&id=&donnees=&id=5&donnees=1

Vous voyez ce que je veux dire ?

Voici la fonction qui appelle la modale (page parente):

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
28
29
30
31
32
33
34
35
$('.actionModal').on('click',
	function(event) {
		event.preventDefault();
		var href = $(this).attr('href');
		var title = $(this).attr('title');
 
		$('.ui-dialog-content').block({ message: '<img src="templates/default/img/loading.gif" />' });
 
		$( "<div>" ).load(href).dialog({
			title: title,
			minHeight: 400,
			minWidth: 700,
			position: ["center",30],
			resizable: false,
			draggable: true,
			modal: true,
			close: function( event, ui ) {
				$('.blockMe').block({ message: '<img src="templates/default/img/loading.gif" />' });
				$.ajax({
					type: "POST",
					url: "societe.php",
					cache: false,
					success:
						function(ret) {
							$('.blockMe').unblock();
							$("#main").html(ret);
					},
					statusCode: {
						404: function() { alert("page not found"); }
					}
				});
			}
		});
	}
);

Et dans la modale, la fonction qui vérifie et envoi les données (j'ai mis un href sur mon bouton et je découpe ensuite pour récupérer l'id du formulaire pour le serialize):

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
28
29
30
31
32
33
34
$('.submitAction').on('click',
		function(event) {
			event.preventDefault();
			var href = $(this).attr('href'); // je récupère quelque chose sous la forme #idduform-pagedetraitement.php
			var elemt = href.split('-');
			var check = $( elemt[0] ).serializeArray();
 
			$('.ui-dialog-content').block({
				message: '<img src="templates/default/img/loading.gif" />',
			});
 
			console.log($( elemt[0] ).serialize() );
			if (checkForm(check) === true) {
				$.ajax({
					type: "POST",
					data: $( elemt[0] ).serialize(),
					url: elemt[1],
					cache: false,
					success:
					function(ret) {
						$('.ui-dialog-content').unblock();
						console.log(ret);
						$('.ui-dialog-content').html(ret);
					},
					statusCode: {
						404: function() { alert("page not found") }
					}
				});
			} else {
				alert("Veuillez saisir tous les champs");
				$('.ui-dialog-content').unblock();
			}
		}
	);

Auriez-vous une super idée pour me dépatouiller ?

[zerros]

je me rends compte qu'à la fermeture de la modale, après rechargement de la page parente, j'ai à chaque fois un élément qui s'ajoute à la page parente.
Cet élément est une div dont la première classe de la liste est ui-dialog.

Je pense qu'il faut jouer sur la suppression de ces éléments, mais je ne sais pas comment faire ?

[zerros]

ca y est, j'y suis arrivé. ouff, chercher sur google sans savoir quel sont les termes techniques, c'est chaudddd. Mais ça marche avec:

Code :

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

1
2
$(this).dialog("destroy");
$(this).remove();

dans la fonction close

[Darkaurora]

La gestion poussée des Dialog (UIjQuery ou Bootstrap) est assez délicate dû principalement au fait que les créateurs n'ont pas pensé que certains d'entre nous allions massacrer leurs produits.

Bref, dans un premier temps vérifies tes sélecteurs ainsi que tes champs en les listant. Il n'est pas impossible que tu ais plusieurs fois les mêmes champs et forcément avec une gestion strict de l'erreur tu ne puisse plus valider tes formulaires.

Généralement ce genre de problème se règle en révisant bien l'initialisation et la destruction du Dialog