[AJAX] Sorttable.js et XMLHttpRequest

Version imprimable

22/11/2007, 14h20
Malola

[AJAX] Sorttable.js et XMLHttpRequest
Après avoir réglé mon problème de variable $_POST, voilà que j'ai un autre souci.

à l'actualisation de ma div, j'affiche un tableau avec, normalement, une fonction de tri par colonne grâce à la classe sorttable.js
Code:

1 2 <script type="text/JavaScript" src="sorttable.js"> </script>
mais le tri ne fonctionne ps après l'actualisation.
J'ai trouvé une fonction pour à priori réévaluer les scripts.
Code:

1 2 3 4 var mesScripts = document.getElementById(id).getElementsByTagName("script"); for (var i=0; i<mesScripts.length; i++) { eval(mesScripts[i].innerHTML); }
Le script est bien réévalué car si je met un alert(mesScripts) avec 4 scripts dans ma page, j'ai 4 fois le message.

Ma question est la suivante :

Est ce que la réévaluation marche avec une classe javascript ?

Merci d'avance.
22/11/2007, 17h49
denisC

Citation:

Envoyé par Malola

Est ce que la réévaluation marche avec une classe javascript ?

Oui. Par contre, je suppose que tu dois faire appel explicitement à cette fonction, non? Comment demandes-tu à cette classe de faire le tri d'un objet Javascript?

A mon avis, c'est plutot ça ton problème. Montre nous comment tu traites le retour de ton appel Ajax.

Bonjour et merci pour ta réponse.

Voilà le code où je déclare class='sortable' de la classe sorttable.js (déclarée par <script type='text/JavaScript' src="sorttable.js"></script>)

Code:

1
2
3
4
5
6
7
8
9
<table class='sortable' id='tableau' border=0 cellpadding=0 cellspacing=0 width=620 style='table-layout:fixed'>
			<tr>
				<th class='sorttable_numeric' height='40' style='padding-top:1px;padding-right:1px;padding-left:1px;color:maroon;font-size:8.0pt;font-weight:700;font-style:italic;text-decoration:none;font-family:Arial, sans-serif;text-align:center;vertical-align:middle;border:.5pt solid windowtext;background:silver;white-space:normal;'onmouseover=this.style.backgroundColor='red' onmouseout=this.style.backgroundColor='silver'>Combinaison</th>
					<th class='entete_tableau' onmouseover=this.style.backgroundColor='green' onmouseout=this.style.backgroundColor='silver'>Nombre de fois sortie</th>
					<th class='entete_tableau' onmouseover=this.style.backgroundColor='red' onmouseout=this.style.backgroundColor='silver'>Date de derni&egrave;re sortie</th>
					<th class='entete_tableau' onmouseover=this.style.backgroundColor='green' onmouseout=this.style.backgroundColor='silver'>Ecart en jours</th>
					<th class='entete_tableau' onmouseover=this.style.backgroundColor='red' onmouseout=this.style.backgroundColor='silver'>Ecart maximum en jours</th>
					<th class='entete_tableau' onmouseover=this.style.backgroundColor='green' onmouseout=this.style.backgroundColor='silver'>Ecart relatif</th>
			</tr>

Ceux sont les balises th qui servent à identifier la zone où cliquer pour trier.

J'ai du mal à répondre à ta question : Montre nous comment tu traites le retour de ton appel Ajax.

Je te mets le code de ma fonction :

Code:

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
36
37
38
39
40
41
<script type="text/javascript">
 
function affiche_stats(id) {
 
	var xhr_object = null; 
 
	if(window.XMLHttpRequest) // Firefox 
	   xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	   xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	   return; 
	} 
 
	var method   = "POST"; 
	var filename = "affiche_stats.php"; 
	var data = null;
 
	xhr_object.open(method, filename, true); 
 
	xhr_object.onreadystatechange = function() { 
	   if(xhr_object.readyState == 4) { 
		document.getElementById(id).innerHTML = xhr_object.responseText;
		var mesScripts = document.getElementById(id).getElementsByTagName("script");
			for (var i=0; i<mesScripts.length; i++) {
			eval(mesScripts[i].innerHTML);
			}
	   } 
	} 
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
	type_donnees = document.getElementById('Type_donnees').value;
	type_stats = document.getElementById('Type_stats').value;
	tcourse = document.getElementById('TCourse').value;
	npartants = document.getElementById('Npartants').value;
	data = 'Type_donnees='+type_donnees+'&Type_stats='+type_stats+'&TCourse='+tcourse+'&Npartants='+npartants;
	xhr_object.send(data); 
}
 
 
</script>

J'utilise cette classe car j'ai trouvé celà facile à mettre en oeuvre mais si tu as d'autres pistes, je ne demande qu'à apprendre.
Merci d'avance pour ton aide précieuse.

23/11/2007, 22h40
denisC

Citation:

Envoyé par Malola

J'utilise cette classe car j'ai trouvé celà facile à mettre en oeuvre mais si tu as d'autres pistes, je ne demande qu'à apprendre.
Merci d'avance pour ton aide précieuse.

Ok. Tout me parait bon.

Question suivante : d'ou vient ton sortable.js? Apparement, il faut voir ce qu'il a dans le ventre pour comprendre pourquoi il ne fonctionne pas avec Ajax.

Ton problème, c'est bien qu'une fois que tu as inséré du contenu avec Ajax, il refuse de te trier ton tableau?

On peut voir un exemple de ce que tu renvoies comme responseText?
23/11/2007, 23h22
Malola

1 pièce(s) jointe(s)

Bonsoir,

en ce qui concerne la classe sorttable.js, je l'ai trouvé ici.

http://www.kryogenix.org/code/browser/sorttable/

Je l'ai utilisé avant de faire de l'ajax et celà fonctionnait trés bien.

Après avoir actualisér ma div, le tableau affiché ne peut pas être trié.

Code:

On peut voir un exemple de ce que tu renvoies comme responseText?

Cà, par contre pour moi, c'est pas encore trés clair.

Pour faire simple, j'ai 4 variables qui me permettent de jouer sur mes requêtes Mysql. Un bouton me permet d'actualiser uniquement ma div en affichant un tableau que je veux pouvoir trier en cliquant sur le nom de la colonne.

Je pense aussi que celà vient de la classe elle même, et là c'est une autre histoire.

Je te joins la classe en question.

Merci encore de ta patience.

Citation:

Envoyé par Malola

Cà, par contre pour moi, c'est pas encore trés clair.

Pour faire simple, j'ai 4 variables qui me permettent de jouer sur mes requêtes Mysql. Un bouton me permet d'actualiser uniquement ma div en affichant un tableau que je veux pouvoir trier en cliquant sur le nom de la colonne.

La question est de savoir que renvoie l'appel à affiche_stats.php? Un élement table? Une suite de lignes (tr)?...

Citation:

Envoyé par Malola

Je pense aussi que celà vient de la classe elle même, et là c'est une autre histoire.

Je te conseille de tenter un :
Code:

1 2 3 4 5 6 7 xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { document.getElementById(id).innerHTML = xhr_object.responseText; sorttable.init(); } }
Ou sinon:
Code:

1 2 3 4 5 6 7 xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { document.getElementById(id).innerHTML = xhr_object.responseText; setTimeout(function(){sorttable.init();},10); } }
Essaye les deux, avec un peu de chance, il y en a qui marche ;)

Bonjour,

rien ne marche.
pour les deux méthodes, j'ai erreur de syntaxe dans la fonction affiche_stats(id) et objet attendu au niveau

Code:

<input type="button" name='actualiser_stats' value="Actualiser les données" onclick=affiche_stats('donnees');>

Par contre, j'ai inseré des alert à ce niveau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 xhr_object.onreadystatechange = function() { if(xhr_object.readyState == 4) { document.getElementById(id).innerHTML = xhr_object.responseText; var mesScripts = document.getElementById(id).getElementsByTagName("script"); alert(mesScripts.length); for (var i=0; i<mesScripts.length; i++) { eval(mesScripts[i].innerHTML); } alert(mesScripts); alert(mesScripts[i].innerHTML); }
Le secon me retourne [object] et le 1er et le 3ème --> script error!
Erreur:'length' a la valeur Null ou n'est pas un objet.
Erreur:'innerHTML' a la valeur Null ou n'est pas un objet.

Il n'existe pas d'autres classes pour effectuer le tri dans un tableau ?

Toujours merci pour ton aide.

28/11/2007, 18h54
denisC

Citation:

Envoyé par denisC

La question est de savoir que renvoie l'appel à affiche_stats.php? Un élement table? Une suite de lignes (tr)?...

:?
29/11/2007, 09h11
Malola

Bonjour,

voilà ce que me renvoie un alert(xhr_object.responseText);

http://s2.supload.com/thumbs/default...iche_stats.png

L'affichage et la mise à jour du tableau sont parfaits. C'est juste que la fonction de tri par colonne ne fonctionne pas.

Merci de votre aide.
05/12/2007, 10h35
Malola

Après de nombreuses recherches, j'ai trouvé une autre librairie pour trier un tableau qui fonctionne en ajax.

Cela venait donc vraisemblablement de ma 1ere librairie sorttable.js.

Merci de votre aide.
13/05/2008, 20h36
dchamot

Citation:

Envoyé par Malola

Après de nombreuses recherches, j'ai trouvé une autre librairie pour trier un tableau qui fonctionne en ajax.

Cela venait donc vraisemblablement de ma 1ere librairie sorttable.js.

Merci de votre aide.

Hello,

Merci pour ce topic... qui tombe pile sur mon problème... puisque j'utilise également sorttable.js.

Alors Malola, quel est l'autre oiseau rare STP.

Je te remercie d'avance.

Denis

Ps: je vais essayer un peu d'investiguer selon vos précédents messages pour voir ou cela me mène tout de même, mais je suis intéressé par ta lib.
14/05/2008, 23h47
dchamot

Hello,

J'ai pas trouvé mieux que cette liste pour l'instant :

http://www.smashingmagazine.com/2007...ml-javascript/

D.
23/05/2008, 14h12
Jonas-fr
Si si sorttable.js est compatible avec AJAX!!

J'ai reussi à la faire marcher sans aucune difficulté!

Pour ce faire il faut bien mettre la ligne sorttable.init() dans ajax.js (comme indiqué dans un post précédent):
Code:

1 2 3 4 5 6 if( xmlhttp.status == 200 ) { element.innerHTML = xmlhttp.responseText; sorttable.init() }
mais il faut aussi commenter la ligne (n°24 chez moi) dans le fichier sorttable.js qui empeche la fonction d'initialisation d'être appelée si elle a déjà été appellée dans la page. Voici la modification au début du script sorttable.js:
Code:

1 2 3 4 5 sorttable = { init: function() { // quit if this function has already been called //if (arguments.callee.done) return; // <-- la ligne qui bloquait a été commenté
et voilà c'est tout! A vous les joies de l'AJAX et de sorttable.js qui est vraiment une bibliothèque très utile et très pratique!

PS: Et pardonnez moi de pas m'être présenté sur le forum car c'est mon 1er post. Je suis étudiant en Informatique et content d'être sur ce forum pour filer des coup de mains et apprendre des trucs :)
26/05/2008, 14h19
dchamot

[Résolu]

Merci, c'est bon avec tes indications!

Cool.