Partager vos
astuces Bricolage
Posez votre question Signaler

[Ajax] evenement

otto - Dernière réponse le 1 sept. 2008 à 00:24
Bonjour,
Pour un script tout simple, j'aurai besoin d'activer un evenement a la suite d'une requete ajax.
Je m'explique :
d'abord la requête ajax s'effectue sans problème et affiche un petit texte dans une div prévu.
Mais voila je souhaite qu'après environ 2sec se petit texte disparaisse.
Pour mettre cela en place j'utilise : 
function empty(id){
	document.getElementById(id).innerHTML = '';
}

function timer(id){
	setTimeout("empty('"+id+"')",2000);
}

ce qui marche parfaitement.
Le probleme est que je n'arrive pas a lancer un évent pour lancer la fonction
j'ai essayer : 
<div id="out_radio" class="out"><b onload="timer('out_radio')">supprimer</b></div>

sans succès :/ si quelqu'un aurait une idée :) Merci d'avance
Lire la suite 

[Ajax] evenement »

9 réponses
Réponse
+0
moins plus
otto 31 août 2008 à 21:54
Oui aucun problème sur le <body> mais je cherche a ouvrir un event a la suite de l'apparition de ce petit bout de code ;)

 Ajouter un commentaire
Marco la baraque - 31 août 2008 à 22:28
Yo !
Alors la réponse est très simple. Tu ne dois pas appeler ta méthode timeout comme ça (l'évènement onLoad ne sera pas levé car il n'est levé qu'une seule fois : au chargement de la page. Ajax ne rechargeant pas la page mais la modifiant dynamique, tu n'a aucune chance d'avoir un second évènement onLoad).
Si j'ai bien compris ton problème, la solution consiste à créer ton timeout en même temps que tu affiches ton div; et non pas de créer le div, qui en s'affichant va créer le timeout.
Ajouter un commentaire
Réponse
+0
moins plus
otto 31 août 2008 à 23:08
J'y est penser mais c pas vrt acceptable exemple:
je clique sur le lien sa va démarrer le timeout pdt ce temps j'envoie des requête asser lourde vers mysql le temps de chargement de la page est donc vrt plus ou moin aléatoire ... un coup le contenu va disparaitre bien et un autre coup il disparaitra trop vite :'(.

 Ajouter un commentaire
Marco la baraque - 31 août 2008 à 23:15
La solution est de faire un appel synchrone, au lieu du classique asynchrone de Ajax.
Comme ça tu attends la réponse de ton appel (les traitements dans ta BD ont le temps de se faire...), et dès que cette réponse arrive, tu peux afficher ton div et créer ton timer.
Pour écouter la réponse, il faut faire appel à la fonction onReadyStateChange de ton objet xmlHttpRequest : 
xhr_object.onreadystatechange = function() {
   if(xhr_object.readyState == 4) {
    //ce que tu veux : afficher le div et créer le timer
   }
}

le readyState vaut 4 lorsque toute la réponse a été reçue (c'est ce que tu souhaites).

Tu peux bien évidemment afficher le div dès lors que tu envoie la requête, et ne créer le timer que quand le readeState passe à 4, c'est à toi de voir ce que tu souhaites vraiment.
Ajouter un commentaire
Réponse
+0
moins plus
otto 31 août 2008 à 23:26
Merci

c'est une exellente idée mais au risque de paraitre obtus le problème c'est que j'utilise une classe qui gère ajax pour tout mon site, c'est toujours la même sa m'ennuie donc un peu de rajouter du contenue utile que une fois surtout que cet classe c vrt le clou du site donc vrt bcp bcp d'affichage :). Je cherche un type d'événement qui puisse gérer simplement ce petit détail ^^

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
otto 31 août 2008 à 23:43
C'est une classe perso. Les framework comme prototype sont géniaux mais bcp trop lourd.
si sa peut aider des personne la voila :)

Merci bcp pour ton aide ;) 
function getData(data,document,target){
	 this.data = data;
	 this.document = document;
	 this.target = target;
	 var current = this;
     var exp = new RegExp("^http","");
	 if(exp.test(this.document) == true){
	     try {
		     netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
		 }
		 catch (e) {
		     window.document.write("unable to connect with: " + this.document);
			 return 0;
		 }
	 }
	 var xhr;
     try {
         xhr = new ActiveXObject("Msxml2.XMLHTTP");
     }  
     catch (e) {
         try {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
	     } 
	         catch (e) {
	         xhr = false;
	         }
     }
     if (!xhr && typeof XMLHttpRequest != 'undefined'){
         xhr = new XMLHttpRequest();
     }
     xhr.open("POST", this.document, true);
	 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
	 data = "data=" + this.data;
      xhr.send(this.data);
     xhr.onreadystatechange = function(){
         if (xhr.readyState == 4 && xhr.status == 200) {
             window.document.getElementById(current.target).innerHTML = xhr.responseText;
         }
		 else{
		     window.document.getElementById(current.target).innerHTML = "<center>chargement patienter svp ...</center>";
		 }
     }
	 return 0;
}

Ajouter un commentaire
Ajouter un commentaire
Réponse
-1
moins plus
Marco la baraque 1003Messages postés 9 mai 2008Date d'inscription 31 août 2008 à 21:51
Bonsoir,
Je ne pense pas que l'évènement onLoad soit disponible sur le tag B, seulement sur le tag BODY.
Essaie de le placer sur le body et regarde si ta fonction js est bien appelée.

Cordialement,

Ajouter un commentaire
Ajouter un commentaire
Réponse
-1
moins plus
Marco la baraque 1003Messages postés 9 mai 2008Date d'inscription 31 août 2008 à 23:32
Ma réponse :
- Garde ta classe pour tous les autres appels asynchrones.
- Pour cet appel particulier, crées ta propre classe qui étend le comportement de l'existant à ta tâche particulière.

Juste une question, quand tu dis que tu utilises une classe qui gère ajax pour tout ton site, tu utilises un bibliothèque particulière (dojo, prototype, yahoo ui, google...) ou alors tu as créé toi même cette classe ?

Cordialement,

Ajouter un commentaire
Ajouter un commentaire
Réponse
-1
moins plus
Marco la baraque 1003Messages postés 9 mai 2008Date d'inscription 1 sept. 2008 à 00:24
Sinon ce que tu peux faire, c'est garder ajouter un argument callback à ta fonction getData. De cette manière, tu peux spécifier une fonction callback à appeler lorsque xhr.readyState == 4.
L'avantage, c'est que tu peux ne rien passer en argument, et gérer ce cas là pour tous les appels classiques, et dès que tu as un appel qui différe, tu passes une fonction callback.

L'inconvénient est que tu tu fais 2 appels très proches, le pointeur vers la fonction callback1 va être écrasé par la fonction callback2 et tu risques d'appeler la fonction callback2 deux fois.
Exemple de scénario possible :
appel async1 : callbackGlobal = callback1
appel async2 : callbackGlobal = callback2
réponse de async1 : appel de callbackGlobal (callback2 est appelée)
réponse de async2 : appel de callbackGlobal (callback2 est appelée)

Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « [Ajax] evenement » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook