Discussion :

[latour500]

Bonjour à tous,

Je sèche un peu sur une méthode de chargement du résultat d'un fichier php dans une div avec MooTools.
La fonction en elle même fonctionne parfaitement après un submit, mais il y a un mais...
Je n'arrive pas à agir via d'autres fonctions sur ce nouveau contenu sans un message d'alerte. Si j'enlève cette validation via un message d'alerte, aucune fonction n'est prise en compte.

Schématique ça donne :

[champs de formulaire à envoyer]
[bouton à envoyer]

[résultat de données via Send traiter par le fichier php]

Les codes :

MooTools :

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
 
 window.addEvent('domready', function() { 
 
//chargement de page php externe en ajax
                $('myForm').addEvent('submit', function(e) { 
 
                     // Prevents the default submit event from loading a new page. 
                     new Event(e).stop();
 
                     // Set the options of the form's Request handler. 
                     // ("this" refers to the $('myForm') element). 
                     this.set('send', { 
                          onComplete: function(response) { 
                               $('log').set('html', response); 
							  // alert("Fin");
                          } 
                     }); 
 
                     // --------- Fonctions après le chargement du la page ajax.form.php
                     this.send(); 
                   //ici je suis obligé de mettre une alert('blabla');
                   //mes autre action sur ma div 
                   winScroller.toElement('monresultat');  //fonction de scroll définie mais pas afficher dans ce code, ne marche si pas mis avant d'alerte
                   //etc...
 });
 
}

Html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<div id="form_cp">
	<form id="myForm" action="ajax.form.php" method="post">
		<div id="form_box" class="aCoupleOfDivs">
			<div>
				<p>Name:</p><input type="text" name="code_postal" value="votre code postal" />
			</div>
		</div><input id="btn_cp" type="submit" name="button" />
	</form>
	<div id="log" class="aCoupleOfDivs">
		<!-- returned results to show here (replaces contents of this div) //-->
	</div>
</div>

Fichier php 'ajax.form.php :

Code php :

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

1
2
3
4
5
 
$code_postal = $_POST['code_postal'] ; 
$code_postal_debut = substr($code_postal,0,2);
 
echo  '<div id="monresultat">'.$code_postal_debut.'</div>' ;

Donc après le code JS -> 'this.send();', si je ne mets pas alert('blabla');, je ne peux pas agir avec d'autres fonctions MooTools sur ma div 'monresultat'.
J'imagine que cela a un lien avec une action déjà définie sur un élément qui n'existe pas encore puisqu'il est chargé via la méthode send venant du fichier php donc.

Je suis preneur de toutes idées...

Merci d'avance.

[vermine]

Bonjour,

Vous pouvez soit modifier votre logique en appelant la suite du code dans le onComplete ou bien en passant par une requête synchrone en modifiant la valeur de la propriété async lors du this.set('send', ... ou bien lors du this.send(). C'est un booléen qui positionné à false lance une requête synchrone.