Fonction qui ne fonctionne que lorsqu'il y a un Alert. [Résolu]

[@po©alypse]

Bonjour,

Tout est dans le titre, ah non je rajouterai que je suis au bord du craquage .

J'ai une page qui affiche un tableau dont les entête peuvent être trié grâce a un script (cf : http://www.javascripttoolbox.com/lib/table/source.php).

Ce tableau peut être régénère en AJAX grâce à des filtres que j'ai mis en place :

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
 
/*
	Fonction qui récupère les valeurs des filtres (select)
	et utilise la page tableau_equipe.php pour rafraîchir la liste des équipes
*/			
function tableau_equipes(){
	var xhr = getXhrFiltre();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('liste_equipe').innerHTML = leselect;
		}
	}
 
	xhr.open("POST","tableau_equipe.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	// le type d'équipe
	sel_type = document.getElementById('type');
	type = sel_type.options[sel_type.selectedIndex].value;
 
	// l'id du pays
	sel_pays = document.getElementById('nation');
	nation = sel_pays.options[sel_pays.selectedIndex].value;
 
	// le nom du pays ou l'abregé contient
	like = document.getElementById('recherche_equipe').value;
	//like ='';
	//alert("type="+type+"&nation="+nation+"&like="+like);
 
	xhr.send("type="+type+"&nation="+nation+"&like="+like);
 
	//On fait appel à cette fonction (table.js) afin de permettre le tri sur le tableau créé via AJAX (tableau_equipe.php)
	alert("1");
	Table.auto();
}

Cependant lorsque le tableau est rechargé avec AJAX il ne peut être trié que lorsque je met une alert avant l'appel à la fonction Table.auto();
Si je met l'alert après l'appel a Table.auto(); le tableau ne peut être trié.

Auriez vous une idée qui puisse me guider vers la lumière ?

[SpaceFrog]

ton ajax est assynchrone ?

[@po©alypse]

Envoyé par SpaceFrog

ton ajax est assynchrone ?

Ahhh..... Pas pensé à cela merci.
Par contre en étant en mode synchrone les filtres ne fonctionnent plus .
Je vais chercher un peu avant de mettre le topic en résolu .

Merci à toi.

[Antjac]

La réponse est dans le callback

[@po©alypse]

Envoyé par Antjac

La réponse est dans le callback

Qu'est ce donc que le callback ?

[SpaceFrog]

en fait tu attribues le resultat en innerHTML ...
le js n'est pas interprété ...

[@po©alypse]

Envoyé par SpaceFrog

en fait tu attribues le resultat en innerHTML ...
le js n'est pas interprété ...

Je dois donc utiliser document.write ?
Parce que j'avais lu ceci : http://www.developpez.net/forums/d91...ocument-write/

[SpaceFrog]

non surtout pas document.write ...
tu dois construire l'equivalent du innerHTML au moyen du dom et y binder les evènements

le plus simple est de passer par jquery qui le gère

[Antjac]

Envoyé par @po©alypse

Qu'est ce donc que le callback ?

Le callback est un événement JS qui se déclenche quand l'appel Ajax retourne un résultat.
Cela permet d'être sur que le résultat est bien arrivé dans le cas de requêtes asynchrone (le A de AJAX)

http://www.developertutorials.com/le...ction-2641.php

[@po©alypse]

Envoyé par SpaceFrog

non surtout pas document.write ...
tu dois construire l'equivalent du innerHTML au moyen du dom et y binder les evènements

le plus simple est de passer par jquery qui le gère

Ouarf...
Moi qui commence tout juste à me mettre au JQuery, Ajax and co tu me pousses au bord du gouffre .

Le innerHTML bloque le javascript parce que je passe en mode synchrone ?
Car en asynchrone cela fonctione parfaitement (sauf l'appel a Table.auto().

[SpaceFrog]

ceci étant je ne vois pas pourquoi le fait de mettre un alert permettrait l'interprétation du js dans le retour ...

on peut voir le code du retour ?

[Antjac]

Envoyé par SpaceFrog

ceci étant je ne vois pas pourquoi le fait de mettre un alert permettrait l'interprétation du js dans le retour ...

on peut voir le code du retour ?

Mettre un alert laisse le temps au serveur d'effectuer l'appel ajax et de renvoyer le résultat.
Il ne faut pas oublier que AJAX travaille en asynchrone

[SpaceFrog]

cf plus haut

Envoyé par spacefrog

ton ajax est assynchrone ?

essaye

Code :

xhr.open("POST","tableau_equipe.php",false);

[@po©alypse]

Envoyé par SpaceFrog

ceci étant je ne vois pas pourquoi le fait de mettre un alert permettrait l'interprétation du js dans le retour ...

on peut voir le code du retour ?

Qu'appelles-tu "le retour" ?
Si c'est la fonction Table.auto (récupéré depuis http://www.javascripttoolbox.com/lib/table/) :

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
 
table.auto = function(args) {
		//alert("auto");
		var cells = [], tables = document.getElementsByTagName("TABLE");
		var val,tdata;
		if (tables!=null) {
			for (var i=0,L=tables.length; i<L; i++) {
				var t = table.resolve(tables[i]);
				tdata = table.tabledata[t.id];
				if (val=classValue(t,table.StripeClassNamePrefix)) {
					tdata.stripeclass=val;
				}
				// Do auto-filter if necessary
				if (hasClass(t,table.AutoFilterClassName)) {
					table.autofilter(t);
				}
				// Do auto-page if necessary
				if (val = classValue(t,table.AutoPageSizePrefix)) {
					table.autopage(t,{'pagesize':+val});
				}
				// Do auto-sort if necessary
				if ((val = classValue(t,table.AutoSortColumnPrefix)) || (hasClass(t,table.AutoSortClassName))) {
					table.autosort(t,{'col':(val==null)?null:+val});
				}
				// Do auto-stripe if necessary
				if (tdata.stripeclass && hasClass(t,table.AutoStripeClassName)) {
					table.stripe(t);
				}
			}
		}
		else	{
			alert("null");
		}	
	};

Dans la page principale la balise qui sera rafraîchit via Ajax est écrite de cette façon :

Code :

1
2
 
<div id="liste_equipe"><?php echo init_equipes($connexion);?></div>

La page vers laquelle j'envoie mes variable avec Ajax (tableau_equipe.php) afin de modifier le tableau :

Code :

1
2
3
4
5
6
7
8
9
 
<?php
include('fonction.php');
$connexion=connexion();
session_start();
 
 
echo init_equipes($connexion);
?>

Et voici ma fonction init_equipes :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
function init_equipes($connexion)	{
		$select_equipes = "SELECT `id_equipe`, `nom`, `abrege`, `type`, `id_nation` FROM `equipes`";
 
		if(isset($_POST['nation']) and $_POST['nation'] != -1)	{
			$where = " WHERE `id_nation` = '".$_POST['nation']."'";
		}
 
		if(isset($_POST['type']) and $_POST['type'] != -1)	{
			if(isset($where))	{
				$where .= " AND `type` = '".$_POST['type']."'";
			}
			else	{
				$where = " WHERE `type` = '".$_POST['type']."'";
			}
		}
 
		if(isset($_POST['recherche_equipe']))	{
			if(isset($where))	{
				$where .= " AND (`nom` like '%".$_POST['recherche_equipe']."%' OR `abrege` like '%".$_POST['recherche_equipe']."%')";
			}
			else	{
				$where = " WHERE (`nom` like '%".$_POST['recherche_equipe']."%' OR `abrege` like '%".$_POST['recherche_equipe']."%')";
			}
		}
 
		if(isset($where))	{
			$select_equipes .= $where;
		}
 
		$select_e = select_gen($select_equipes, $connexion);
 
		echo $select_equipes.'<br />';
 
		echo "
		<table class=\"listing\">
			<tr>				
				<td align=\"left\">
					<table class=\"sort_equipes table-autosort:0 table-stripeclass:alternate\">
						<thead>
							<tr>
								<th class=\"table-sortable:default\" align=\"left\">Equipe</th>
								<th class=\"table-sortable:alphanumeric\" align=\"left\">Abrege</th>
								<th class=\"table-sortable:default\" align=\"left\">Type</th>
								<th class=\"table-sortable:default\" align=\"left\">Nation</th>
								<th class=\"table-nosort\" align=\"left\">Modifier</th>
								<th class=\"table-nosort\" align=\"left\">Supprimer</th>
							</tr>
						</thead>
 
						<tbody>";
 
		for($i=0; $i<count($select_e); $i++)	{
			$select_nation = "SELECT `pays` FROM `nations` WHERE `id_pays` = '".$select_e[$i]->id_nation."'";
			$select_n = select_gen($select_nation, $connexion);
 
			if($i%2 != 0)
				$class = " class = \"alternate\"";
			else
				$class = "";
 
			if($select_e[$i]->type == 'C')
				$type = 'Club';
			else
				$type = 'National';
 
			echo "
			<tr".$class.">
				<td>".$select_e[$i]->nom."</td>
				<td>".$select_e[$i]->abrege."</td>
				<td>".$type."</td>
				<td>".$select_n[0]->pays."</td>
				<td><center><a href=\"modifier_equipe.php?id=".$select_e[$i]->id_equipe."\" ><img src=\"/img/icons/modifier.png\" /></a></center></td>
				<td><center><a href=\"del_equipe.php?id=".$select_e[$i]->id_equipe."\" ><img src=\"/img/icons/croix.png\" /></a></center></td>
			</tr>";
 
		}
 
		echo "			</tbody>
					</table>
				</td>
			</tr>
		</table>";
 
	}

[@po©alypse]

Envoyé par SpaceFrog

cf plus haut


essaye

Code :

xhr.open("POST","tableau_equipe.php",false);

C'est ce que j'ai fais lorsque tu m'as demandé si j'étais en asynchrone, et le problème est que si je fais ceci j'ai l'impression que les variables ne sont pas envoyés car le tableau n'est pas modifié (pourtant dans l'alert j'ai mis les variables et elles sont bien initialisées).

Je fais même afficher ma requête et cette dernière ne prend pas en compte les filtres...

[SpaceFrog]

je demandais plutot le code html retourné ???

alert(responseText) ...

[@po©alypse]

Envoyé par SpaceFrog

je demandais plutot le code html retourné ???

alert(responseText) ...

Lorsque open est à false alert(xhr.responseText); ne se fait pas

Lorsque open est à true:

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
SELECT `id_equipe`, `nom`, `abrege`, `type`, `id_nation` FROM `equipes` WHERE `type` = 'C'<br />
 
		<table class="listing">
 
			<tr>				
 
				<td align="left">
 
					<table class="sort_equipes table-autosort:0 table-stripeclass:alternate">
 
						<thead>
 
							<tr>
 
								<th class="table-sortable:default" align="left">Equipe</th>
 
								<th class="table-sortable:alphanumeric" align="left">Abrege</th>
 
								<th class="table-sortable:default" align="left">Type</th>
 
								<th class="table-sortable:default" align="left">Nation</th>
 
								<th class="table-nosort" align="left">Modifier</th>
 
								<th class="table-nosort" align="left">Supprimer</th>
 
							</tr>
 
						</thead>
 
 
 
						<tbody>
 
			<tr>
 
				<td>Paris-Saint-Germain</td>
 
				<td>PSG</td>
 
				<td>Club</td>
 
				<td>France</td>
 
				<td><center><a href="modifier_equipe.php?id=2" ><img src="/img/icons/modifier.png" /></a></center></td>
 
				<td><center><a href="del_equipe.php?id=2" ><img src="/img/icons/croix.png" /></a></center></td>
 
			</tr>
 
			<tr class = "alternate">
 
				<td>paris</td>
 
				<td>psg</td>
 
				<td>Club</td>
 
				<td>France</td>
 
				<td><center><a href="modifier_equipe.php?id=3" ><img src="/img/icons/modifier.png" /></a></center></td>
 
				<td><center><a href="del_equipe.php?id=3" ><img src="/img/icons/croix.png" /></a></center></td>
 
			</tr>
 
			<tr>
 
				<td>paris</td>
 
				<td>psg</td>
 
				<td>Club</td>
 
				<td>France</td>
 
				<td><center><a href="modifier_equipe.php?id=4" ><img src="/img/icons/modifier.png" /></a></center></td>
 
				<td><center><a href="del_equipe.php?id=4" ><img src="/img/icons/croix.png" /></a></center></td>
 
			</tr>			</tbody>
 
					</table>
 
				</td>
 
			</tr>
 
		</table>

[SpaceFrog]

essaye de ralncer un script jquery pour réattribuer le sort sur tes calsses àprès avoir réattribué le innerHTML

[@po©alypse]

Envoyé par SpaceFrog

essaye de ralncer un script jquery pour réattribuer le sort sur tes calsses àprès avoir réattribué le innerHTML

Comme tu es boooooooooonnnnnnnnnn .

En mettant l'appel Table.auto(); juste après l'appel à InnerHTML cela fonctionne parfaitement .

Un grand merci.

Mais par contre je ne comprend pas car tout à l'heure tu me disais que le js est bloqué par le innerHTML...

[SpaceFrog]

Non en fait tu es en non intrusif tu n'as pas de js dans ton code retourné.

Et comme tu l'insères en innerHTML si tu avais du js dedans il ne serait pas interprété.