Rechercher : dans
Par :

[Ajax] evenement

Dernière réponse le 1 sep 2008 à 00:24:50 otto, le 31 aoû 2008 à 21:22:58 
 Signaler ce message aux modérateurs

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
Configuration: Windows XP
Firefox 3.0.1

Meilleures réponses pour « [Ajax] evenement » dans :
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
AJAX (Asynchronous Javascript And XML) VoirIntroduction à AJAX AJAX (Asynchronous Javascript And XML, traduisez Javascript asynchrone et XML) est une méthode de développement web basée sur l'utilisation d'un script Javascript pour effectuer des requêtes web à l'intérieur d'une page web...
Surveillance des journaux d'événements (logs) VoirL'analyse des journaux Un des meilleurs moyens de détecter les intrusions consiste à surveiller les journaux d'événements (appelés aussi journaux d'activité ou en anglais logs). En effet, d'une manière générale les serveurs stockent dans des...

1

Marco la baraque, le 31 aoû 2008 à 21:51:52

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, blogfrisbee point blogspot point com

Répondre à Marco la baraque

2

otto, le 31 aoû 2008 à 21:54:35

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

Répondre à otto

3

Marco la baraque, le 31 aoû 2008 à 22:28:44

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.
blogfrisbee point blogspot point com

Répondre à Marco la baraque

4

otto, le 31 aoû 2008 à 23:08:25

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 :'(.

Répondre à otto

5

Marco la baraque, le 31 aoû 2008 à 23:15:32

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.
blogfrisbee point blogspot point com

Répondre à Marco la baraque

6

otto, le 31 aoû 2008 à 23:26:14

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 ^^

Répondre à otto

7

Marco la baraque, le 31 aoû 2008 à 23:32:46

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, blogfrisbee point blogspot point com

Répondre à Marco la baraque

8

otto, le 31 aoû 2008 à 23:43:47

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

Répondre à otto

9

 Marco la baraque, le 1 sep 2008 à 00:24:50

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) blogfrisbee point blogspot point com

Répondre à Marco la baraque
Collection CommentÇaMarche.net