Discussion :

[Malola]

Bonjour à tous,

j'ai un site où j'utilise Ajax pour mettre à jour une div en affichant un tableau avec fonction de tri.

Ayant 5 minutes à perdre, j'ai voulu m'intéresser à prototype.

j'ai modifié mon code. Le tableau s'affiche mais la fonction de tri non !

voici les liens et codes :

La page qui va bien :
http://statocourses.free.fr/statistiques.php

le code ajax qui va bien :

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
<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;
		fdTableSort.init();
//		alert(xhr_object.responseText);
	   } 
	} 
	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>

La même page avec prototype.js qui affiche bien le tableau mais sans le tri :

http://statocourses.free.fr/statistiques3.php

le code ajax modifié :

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
<script type="text/javascript">
 
function affiche_stats() {
 
		var type_donnees = $F('Type_donnees');
		var type_stats = $F('Type_stats');
		var tcourse = $F('TCourse');
		var npartants = $F('Npartants');
		var url = 'affiche_stats.php';
		var parametres = 'Type_donnees='+type_donnees+'&Type_stats='+type_stats+'&TCourse='+tcourse+'&Npartants='+npartants;
 
		var myAjax = new Ajax.Updater(
			'donnees_stats',
			url,
			{
				method: 'post',
				parameters: parametres,
				onFailure: rapporteErreur,
			}
 
		);
 
	}
 
	function rapporteErreur(requete) {
		alert('Désolé, une erreur s\'est produite.');
	}
 
</script>

Pour les fonctions de tri, j'utilise tablesort.js que je mets en PJ.

Pourquoi le tri ne fonctionne pas dans ma 2nde page ?
Faut que j'évalue mon script ? Que je le réinitialise ?

Quelqu'un a une idée !!!

Merci d'avance.

[Bovino]

Il faudrait peut-être penser à lancer le fdTableSort.init(); au retour de ta requête.

[Malola]

Bonsoir Bovino,

merci de ta réponse. En fait, j'ai déjà essayé de relancer le script mais je séchais.

En fait, j'essaye sur onSuccess alors qu'il fallait le placer sur onComplete.

Pour ce que ca intéresse, voilà le code :

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
<script type="text/javascript">
 
function affiche_stats() {
 
		var type_donnees = $F('Type_donnees');
		var type_stats = $F('Type_stats');
		var tcourse = $F('TCourse');
		var npartants = $F('Npartants');
		var url = 'affiche_stats.php';
		var parametres = 'Type_donnees='+type_donnees+'&Type_stats='+type_stats+'&TCourse='+tcourse+'&Npartants='+npartants;
 
		var myAjax = new Ajax.Updater(
			'donnees_stats',
			url,
			{
				method: 'post',
				parameters: parametres,
				onFailure: rapporteErreur,
				onComplete : function() {
				fdTableSort.init();
				}
			}
		);
 
	}
 
	function rapporteErreur(requete) {
		alert('Désolé, une erreur s\'est produite.');
	}
 
</script>

et ca marche.

Merci d'avoir pris du temps pour résoudre mon problème.

@+