[AJAX] Gérer plusieurs pages de résultats d'une requête

**dubitoph** · 21/07/2007, 00h03

Bonsoir,

J'aimerais afficher les résultats d'une requête par 10.

Page 1 = les 10 premiers, page 2 = les 10 suivants, etc.. et accéder à la page voulue en cliquant sur le numéro adéquat.

Voici mon code :

Au niveau de mon formulaire :

Code :

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

1
2
3
4
5
6
7
8
 
<tr>
  <div id="liste">
    <?php
      affInv(0);
    ?>
  </div>
</tr>

Ma fonction affInv() au niveu de mon fichier fonctionsPhp.php :

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
 
function affInv($numPage)
 {
    if($numPage)
	 $limiteInf = ($numPage * 10) - 1;
	else
	 $limiteInf = 0;
 
	$connect = connection("../interfaces/gestProd.php");
 
    $requete = "select count(0) from produits_tb";
    $result = mysql_query($requete, $connect);
    @$nb = mysql_fetch_array($result);
 
    $requete = "select cle_prod, ordre_liste_prod, denom_prod, (select nom_fourn from fournisseurs_tb where cle_fourn = cde_fournisseur1_prod)  from produits_tb where supprime_prod = 0 or supprime_prod = 2 order by ordre_liste_prod limit $limiteInf, 10;";
    $resultat = mysql_query($requete, $connect);
    $num_result = mysql_num_rows($resultat);
 
    mysql_close($connect);
 
    if($nb[0])
     {
       for($i = 0; $i < $num_result; $i++)
        {
          $row = mysql_fetch_array($resultat);
          echo "<td id='tdcontenu'><input type='text' name='ordreProd' id='ordreProd' value='$row[1]' size='4'><input type='hidden' id='cleProd' value='$row[0]'></td>
	            <td id='tdcontenu'>$row[2]</td>
	            <td id='tdcontenu'>$row[3]</td>
	            <td id='tdcontenu'><input type='text' name='quantite' id='quantite' value=''  size='4'></td>
                   </tr>";
          }
   echo "<tr>
	         <td id='tdcontenu'>Pages</td>
	         <td id='tdcontenu' colspan='2'>";
 
   if($nb[0]  % 10)
	$nombreLiens = ($nb[0] / 10) + 1;
   else
    $nombreLiens = $nb[0] / 10;
 
   for($i = 1; $i <= $nombreLiens; $i++)
	{
	 if($i != 1)
	  echo " - ";
 
	 echo "<a href='' onclick='majListeInv($i)'>$i</a>";
	}
   echo " </td>";
  }
 }

Ma fonction (pour l'AJAX) majListeInv() au niveau de mon fichier fonctionsJs.js :

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
 
function majListeInv(num)
 {
  {
  xhr = getXhr();
  xhr.onreadystatechange = function()
   {
    if(xhr.readyState == 4 && xhr.status == 200)
     {
      document.getElementById('listeInventaire').innerHTML = xhr.responseText;
     }
   }
  xhr.open("POST",'../transferts/ajaxMajListeInv.php',true);
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
  xhr.send("limiteInf="+num);
 }
 }

Et, enfin, mon fichier ajaxMajListeInv.php :

Code :

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

1
2
3
4
5
 
<?php
 if(!empty($_POST['limiteInf']))
  affInv($_POST['limiteInf']);
?>

Le problème que je rencontre est que, lorsque je clique sur un numéro de page, mon div ne se met pas à jour. Je pense que c'est dû au fait que mon fichier ajaxMajListeInv.php n'est pas chargé, mais je n'en vois pas la raison.

Est-ce que quelqu'un aurait une idée?

Merci d'avance pour vos réponses.

Christophe

**dubitoph** · 23/07/2007, 12h07

Bonjour,

Petite précision...

Grâce aux logs d'Apache, j'ai pu déterminer que mon fichier php est bien appelé. Par contre, j'ai relevé l'erreur suivante dans firebug : "Component returned failure code".

Je ne m'en sors pas.

Quelqu'un aurait une idée?

Merci d'avance.

Christophe

**dubitoph** · 23/07/2007, 13h31

Encore un autre essai...

En travaillant de manière synchrone plutôt qu'asynchrone

Code :

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

xhr.open("POST",'../transferts/ajaxMajListeInv.php',false);

les bons résultats s'affichent 1/2 secondes au-dessus de mon div (en laissant toujours les initiaux dans le div), puis disparaissent.

Je tuse....

Christophe

**mikaoul** · 23/07/2007, 16h58

Salut,

Sais-tu s'il rentre dans le if(!empty($_POST['limiteInf'])) ?

Essai de mettre un

Code :

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

else print "erreur";

Deuxième idée, essaie de mettre ton code de la fonction affInv directement dans ton fichier ajaxMajListeInv.php (on sait jamais) !

**dubitoph** · 23/07/2007, 20h49

Bonsoir et merci pour ton intérêt...

J'ai mis ma fonction javaScript dans mon fichier php, et pas de changement.

J'ai également vérifié qu'il rentre bien dans mon test par l'affichage de l'erreur dans le cas contraire, et rien...

Franchement, ce n'est plus patauger que je fais, mais m'engloutir!

Christophe

**mikaoul** · 23/07/2007, 21h21

Et tu n'as pas d'erreur dans ton navigateur ?

**dubitoph** · 23/07/2007, 21h28

Merci pour ton attention...

Non, depuis le travail en synchrone, je n'ai plus d'erreur affichée par firebug.

Christophe

**mikaoul** · 23/07/2007, 21h58

mais en mode synchrone, ce n'est plus du AJAX.
En mode asynchrone, tu avais quoi comme erreur ?

**dubitoph** · 23/07/2007, 22h22

Tout d'abord, je voyais qu'une erreur se produisait, mais je n'arrivais pas à la lire : Firebug affichait 1/2 seconde une erreur, puis poursuivait directement sans laisser l'affichage de l'erreur.

J'ai pu, à mon avis, déterminer de quelle erreur il s'agissait en effectuant une alerte du statut de mon xhr dans

Code :

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

if(xhr.readyState == 4 && xhr.status == 200)

. Dans ce cas, l'erreur était la suivante : "Component returned failure code...". Esr-ce que le statut serait affecté avec un mauvais numéro et, dans ce cas, pourquoi?

Christophe

**mikaoul** · 24/07/2007, 09h33

Apparemment le problème vient de ta fonction affInv() qui ne renvoie pas un composant "valide".
Essai de mettre en commentaire affInv(...) dans ton fichier ajaxMajListeInv et de seulement faire un print $_POST['limiteInf'];
Juste pour voir situer le problème.

**dubitoph** · 24/07/2007, 11h55

Bonjour et merci du suivi...

Pour tenter d'avancer, j'ai supprimé l'appel à ma fonction php dans mon div lors du premier chargement du formulaire pour faire appel à ma fonction javascript lors du onload du body :

Code :

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

1
2
3
4
5
<body onload="majListeInv(1);">
...
<div id="listeInventaire">  
</div>
...

Rien n'a changé.

En faisant comme tu m'as proposé, de temps à autre je vois tout de même apparaître l'erreur de composant et à d'autre moment, le contenu de la variable $_POST['limiteInf'] s'affiche 1/2 seconde pour ensuite réafficher le contenu initial, à savoir 1.

Serait-ce dû au fait que je fais appel plusieurs fois à la même fonction javaScript "majListeInv()", une fois dans le onLoad et à chaque fois au niveau du onClick du lien?

J'en perds mon Latin...

**mikaoul** · 24/07/2007, 13h16

Tu es toujours en asynchrone ?

et si tu mets
document.getElementById('listeInventaire').innerHTML = "ça marche";

Tu vois afficher "ca marche" ?

**dubitoph** · 24/07/2007, 14h28

Re-bonjour,

Je suis toujours bien en asynchrone.

Si j'effectue ce que tu proposes, ce sont mes 10 premiers enregistrements qui restent affichés : "ça marche" ne s'affiche pas.

Christophe

**mikaoul** · 24/07/2007, 15h14

Ah, ca veut dire que le problème vient de là.
Si tu ajoutes

Code :

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

1
2
3
4
5
if(xhr.readyState == 4 && xhr.status == 200){
      document.getElementById('listeInventaire').innerHTML = xhr.responseText;
}else
   alert(xhr.status);

**dubitoph** · 24/07/2007, 15h36

Hé bien, j'ai toujours le même type d'erreur affiché, et le statut contient pourtant bien 200.

Par contre, j'ai fait la même chose avec le readyState, et lui contient 1 au lieu de 4.

**dubitoph** · 24/07/2007, 15h52

J'ai trouvé la provenance du problème sans pour autant avoir la solution pour le régler.

J'ai placé un alert('OK') juste après mon send. Lorsqu'il load la première fois le body, il m'affiche l'alerte, puis, après le clic sur OK, m'affiche les 10 premiers résultats. Normal...

Par contre, lorsque je clique sur un lien pour voir d'autres résultats (ex : clic sur 2 pour voir les resultats 10 à 19), il m'affiche l'alerte et, en même temps, les résultats adéquats dans le div adéquat puis, lorsque je clique sur OK, il me vide les résultats et me réaffiche l'alerte et enfin, me réaffiche les 10 premiers résultats.

Il met donc correctement à jour le div puis recharge le body et refait une mise à jour via le onload qui, du fait que je travaille en asynchrone, ne devrait pourtant pas être effectué.

**mikaoul** · 24/07/2007, 16h15

Si on récapitule, tu charges ton formulaire une première fois en utilisant onload.
Dans ce cas tes fonctions marchent très bien, dans le sens où ça remplit ta balise div.

Ensuite pour afficher les 10 suivants, tu cliques sur le bouton avec le numéro. Et ça ne marche mais le nouveau texte ne s'affiche que quelques secondes et est remplacé par l'ancien.

Tout d'abord, essai de revenir à ta version initiale, cad avec affInv() directement dans la div.

Ensuite affiche une alerte dans ta fonction ajax juste après le if(ready... && status) (avant le innerHTML).

Tu utilises quel navigateur ?

**dubitoph** · 24/07/2007, 16h43

Voilà...

Tout d'abord, j'utilise FireFox.

Quand je place une alerte dans le if avant l'instruction "document.getElementById...", lors du premier load, il m'affiche correctement les 10 premiers résultats. Ensuite, lorsque je clique sur un lien, il m'affiche l'alerte puis, après un clic sur OK, les résultats demandés, puis à nouveau l'alerte et enfin, après un clic sur OK, à nouveaux les 10 premiers résultats.

Je ne comprends pas pourquoi il réappelle la fonction une seconde fois.

**mikaoul** · 24/07/2007, 16h49

Ah d'accord, en fait, il appelle la fonction une deuxième fois parce que tu as le onload et ton lien est

Code :

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

<a href="" onclick=".....>

Avec rien dans le href, il recharge la page donc appele on onload

Essaie de modifier ton lien comme ceci

Code :

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

<a href="javascript:;" onclick="...>

Ou directement

Code :

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

<a href="javascript:majListeInv(<?php print $numero; ?>)><?php print $numero; ?></a>

**dubitoph** · 24/07/2007, 16h56

Je vais tenter ce que tu me proposes, mais je n'avais plus le onlaoad : je l'avais supprimé comme proposé pour le remplacer par l'appel à la fonction php dans le div. C'est pourquoi je ne comprends pas pourquoi il appelle deux fois la fonction lors du clic sur un lien.

[AJAX] Gérer plusieurs pages de résultats d'une requête

JavaScript

Discussions similaires

Partager

Partager