Discussion :

[Malola]

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 :

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

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 :

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

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.

[denisC]

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.

[Malola]

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

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

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 :

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

[denisC]

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?

[Malola]

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 :

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

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.

[denisC]

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)?...

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 :

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

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 :

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

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

[Malola]

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 :

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

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

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

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.

[denisC]

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

[Malola]

Bonjour,

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



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.

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

[dchamot]

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.

[dchamot]

Hello,

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

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

D.

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

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

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 :

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

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

[dchamot]

Merci, c'est bon avec tes indications!

Cool.