Fonction qui ne fonctionne que lorsqu'il y a un Alert.

**@po©alypse** · 03/01/2011, 14h09

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 :

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
 
/*
	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** · 03/01/2011, 14h49

ton ajax est assynchrone ?

**@po©alypse** · 03/01/2011, 14h56

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** · 03/01/2011, 15h25

La réponse est dans le callback

**@po©alypse** · 03/01/2011, 15h34

Envoyé par Antjac

La réponse est dans le callback

Qu'est ce donc que le callback ?

**SpaceFrog** · 03/01/2011, 15h37

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

**@po©alypse** · 03/01/2011, 16h11

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** · 03/01/2011, 16h18

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** · 03/01/2011, 16h21

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** · 03/01/2011, 16h21

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** · 03/01/2011, 16h26

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** · 03/01/2011, 16h30

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** · 03/01/2011, 16h33

cf plus haut

Envoyé par spacefrog

ton ajax est assynchrone ?

essaye

Code :

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

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

**@po©alypse** · 03/01/2011, 16h37

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 :

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

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

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 :

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

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 :

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
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** · 03/01/2011, 16h40

Envoyé par SpaceFrog

cf plus haut

essaye

Code :

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

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** · 03/01/2011, 16h41

je demandais plutot le code html retourné ???

alert(responseText) ...

**@po©alypse** · 03/01/2011, 16h46

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 :

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
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** · 03/01/2011, 16h48

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

**@po©alypse** · 03/01/2011, 16h52

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** · 03/01/2011, 16h55

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

Fonction qui ne fonctionne que lorsqu'il y a un Alert.

JavaScript

Discussions similaires

Partager

Partager