Discussion :

[PapyFouras]

Bonjour à tous!

Actuellement je fait un script d'ajout de commentaires sur un wall avec un refresh post-envoie.

Un message possède une id propre qui est insérée dans un formulaire (chaque message a son formulaire d'insertion de commentaire). Le formulaire est nommé en fonction de l'id du message à commenter (test_form_xx, xx étant l'id)

Afin de récupérer cette id variable je travail avec une identification du clic du bouton submit par classe (que j'ai nommée "tester" pour l'instant):

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
function post_envoie()
{
 
	var maj_content = new Ajax.Updater("content", "./maj.php", {asynchronous:true, method:'get', parameters:""});
	bindElements();
 
}
 
function bindElements()
{
	$$('.tester').each(function (el) 
	{
		return $(el).observe('click', function(event) 
		{
			event.stop();
			alert('clic sur l\'id: ' + this.id);
			post_envoie();
		});
	});
}
 
Event.observe(window, 'load', bindElements);

Avec ce code quand la page est loadée le this.id me retourne l'id du bouton qui correspond par la même occasion à l'id du message à commenter.

Sauf que, et là j'avoue que je dois louper un truc, le premier envoie est ok (execution de la fonction, pas de soucis), mais lorsque j'actualise le contenu de la div et bien c'est finit lorsque je clic sur le bouton ma fonction n'est plus exécutée, comme si ma détection de classe avait disparue...

Lien de test: http://jinsa.fr/sub/test.php

contenu de test.php (sans l'html entourrant)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<?php
echo '
<div id="content">
        <div id="div_10">
                <form id="test_form_10" name="test_form_10" action="send.php">
                <textarea id="area_form_10" name="area_form_10"></textarea>
                <br><button id="10" name="btn_form_10" class="tester">Send it!</button></br>
                </form>
        </div>
</div>
';
?>

contenu de maj.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<?php
echo '
<div id="div_10">
        <form id="test_form_10" name="test_form_10" action="send.php">
        <textarea id="area_form_10" name="area_form_10"></textarea>
        <br><button id="10" name="btn_form_10" class="tester">Send it!</button></br>
        </form>
</div>
version mise a jour
';
?>

Voilà je suis complètement perdu donc si vous avez une idée je suis preneur ^^

Merci d'avance

[gwyohm]

Salut,

Ton problème vient de la synchronisation: dans ta fonction post_envoie, tu fais ta requete AJAX et juste après tu appeles bindElements.
Le problème, c'est que ta requete AJAX n'est surement pas finie !
Tu as 2 solutions :
1/ Tu fais de l'AJAX qui n'en est pas :

Code :

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

1
2
3
4
5
6
7
8
 
function post_envoie()
{
 
 var maj_content = new Ajax.Updater("content", "./maj.php", {asynchronous:false, method:'get', parameters:""});
 bindElements();
 
}

Je dis qui n'en est pas parce qu'on repasse en synchrone, c'est donc du SJAX

2/ Tu attends que la requete AJAX soit finie avant de faire ton bind :

Code :

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

1
2
3
4
5
6
7
8
 
function post_envoie()
{
 
 var maj_content = new Ajax.Updater("content", "./maj.php", {asynchronous:true, method:'get', parameters:"",onComplete: bindElements});
 
 
}

[PapyFouras]

Bonsoir gwyohm et merci de ta réponse!

Alors alors, oui tu as raison je n'y avais pas pensé sur le coup de l'asynchrone effectivement j'appel mon bindelement avant que l'AJAX ne soit terminé ce qui n'est pas bon ^^. Le onComplete corrige effectivement ça... par contre le gros hic c'est que mon gros script dont ce problème n'était qu'une partie ne fonctionne toujours pas... j'ai une erreur un peu louche, je croyais que c'était due à cette partie mais il semble que non...

Voici l'erreur obtenue:
"Illegal variable _files or _env or _get or _post or _cookie or _server or _session or globals passed to script."

On est d'accord que ça veut tout et rien dire à la fois... ce qui n'aide pas... je pense que je mettrais le script en démo parce que là j'ai vraiment besoin d'aide et je ne vois plus du tout d'où peut venir l'erreur :s

Merci beaucoup en tout cas tu m'as bien aidé, par contre je vais bientôt revenir avec le gros script si jamais je n'ai pas d'illumination cette nuit ^^

Bonne soirée et encore merci!

[PapyFouras]

Ok alors je viens de revoir tout mon code et j'avais zappé un bindage de classe ce qui fait qu'en updater cela fonctionne désormais donc c'est super!

Par contre maintenant que je sais qu'il faut que je rebind avec un onComplete... je viens de m'appercevoir qu'il faut que je le fasse égallement sur mes ajax.PeriodicalUpdater et là... ça rigole pas...

Je viens de tenter avec onComplete et onEachComplete mais cela ne marche pas:

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
function post_envoie()
{
 
	//var maj_content = new Ajax.Updater("content", "./maj.php", {asynchronous:true, method:'get', parameters:"",onComplete: bindElements});
 
 
	var oOptions =
					{
						method: "get",
						frequency: 5,
						parameters: "",
						onEachComplete: bindElements
 
					};
 
			var oRequest = new Ajax.PeriodicalUpdater({success: "content"}, "./maj.php", oOptions);
 
}

Aurais-tu une idée pour re-binder après chaque update périodique?

[PapyFouras]

Ok donc j'ai trouvé la réponse au problème du onComplete sur le periodicalUpdater... ce qui est moche c'est que le onComplete ne s'exécute uniquement que lorsque la requête périodique s'arrête. Totalement inutile dans mon cas, donc j'ai construit un PeriodicalExecuter avec ma requête ajax.updater ce qui revient au même... enfin quasiment ^^.

Merci beaucoup pour l'aide, je laisse le script corrigé sur mon serv si jamais d'autres personnes rencontrent ce problème

++