[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.

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.

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?

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.

Citation:

---

Envoy� par denisC

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

---

:?

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.

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.

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.

Hello,

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

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

D.

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

Merci, c'est bon avec tes indications!

Cool.