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

**mikaoul** · 24/07/2007, 17h05

Le fait de la mettre dans la div a le même effet que de la mettre dans le onload car il va recharger la page donc ta div avec affInv(0);

**dubitoph** · 25/07/2007, 09h27

Bonjour,

Je reprends du service...

Hier, j'ai fini par arrêter car j'en avais marre. Aujourdh'ui, bon pied, bon oeil, c'est reparti....

J'ai donc effectué l'appel dans le href. Maintenant, je n'ai plus d'erreur. Par contre, lorsque je clique sur un lien, la liste des résultats désirés vient s'afficher sans mise en page au-dessus des 10 premiers résultats.

Apparemment, mon div contenant initialement le résultat de l'appel à ma fonction php "affInv(1);" ne serait pas remplacé par l'appel à mon javaScript, mais celui-ci viendrait simplement s'ajouter au précédent.

Et vogue la galère....

Christophe

**mikaoul** · 25/07/2007, 10h36

Cool, au moins une partie fonctionne.

Pour le problème d'affichage, le problème ne viendrait-il pas de ta fonction affInv en PHP ?
Tu l'as testé sans utiliser Ajax ?

Sinon pour le savoir remplace ton innerHTML = responseText par ...innerHTML = numero;

Normalement, à chaque clique tu devrais voir s'afficher le numéro de page passé en paramètre de ta fonction ajax.

**dubitoph** · 25/07/2007, 11h14

Bonjour,

A mon avis, le problème ne vient pas de ma fonction car celle-ci est appelée sans l'aide d'AJAX los du premier affichage de mon formulaire :

Code :

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

1
2
3
4
5
<div id="divListe">
 <?php
  affInv(1);
 ?>
</div>

Maintenant, du fait du double affichage lors du clic d'un lien, j'ai tenté de conditionner l'appel direct à la fonction par la non existance d'une varaible de session :

Code :

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

1
2
3
4
5
6
<div id="divListe">
 <?php
  if(empty($test))
   affInv(1);
 ?>
</div>

mais ça n'a rien changé.

Pour moi, ça devrait être un problème de refresh de mon div qui ne s'effectue pas comme il devrait.

Christophe

**mikaoul** · 25/07/2007, 11h24

Normalement utiliser innerHTML permet de remplacer le contenu d'une balise donc je ne pense pas qu'il y ait un prblème de raffraichissement.

Lorsque tu cliques une première fois, tu vois les 10 suivants + les 10 premiers. Et si tu cliques une seconde fois, tu vois les 10 suivants et les 20 premiers ?

Sinon pour savoir si le problème vient vraiment d'Ajax et du raffraichissement. Au départ, mets un bouton qui permet d'afficher les 10 premiers en passant par Ajax.
Tu auras un truc du genre

Code :

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

1
2
3
 
<a href="javascript:majAjax...(1);">10 premiers</a>
<div id="liste..."></div>

**dubitoph** · 25/07/2007, 11h39

Je viens de m'apercevoir d'un problème : lors du premier chargement, tout est ok, mais lorsque je clique sur un lien, mes liens vers les autres pages disparaissent.

Je ne parviens donc pas à tester l'accumulation ou non de tous les résultats.

**dubitoph** · 25/07/2007, 11h46

J'ai quand même effectué ce que tu proposes : j'ai fais

Code :

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

1
2
3
<div id="divListe">
 
</div>

et dans ma fonction "affPages()", j'ai ajouté

Code :

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

echo "<a href='javascript:majListeInv(1)'>1</a>";

avant la boucle pour afficher les autres pages;

Dans ce cas, tous mes liens persistent même quand je clique sur l'un d'eux. Par contre, uniquement les résultats désirés s'affichent, mais sans aucune mise en page au-dessus de mon div.

**dubitoph** · 25/07/2007, 11h52

A y regarder de plus près, j'ai l'impression que le refresh ne se fait pas dans le div divListe, mais vient s'afficher dans le bas du div date.

**mikaoul** · 25/07/2007, 12h00

A y regarder de plus près, j'ai l'impression que le refresh ne se fait pas dans le div divListe, mais vient s'afficher dans le bas du div date.

Si c'est le cas, ca expliquerai le problème de l'accumulation des 2 résultats.

Dans ta fonction ajax, tu devrais avoir quelque chose comme

Code :

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

document.getElementById('divListe').innerHTML = xhr.responseText;

**dubitoph** · 25/07/2007, 12h49

Comme j'avais déjà eu un problème au niveau de la réutilisation d'un même objet dans un précédent script, je m'étais demandé si le problème ne venait pas de là( mais non...).

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

dans laquelle il est bien spécifié que c'est le div divListe qui doit être mis à jour.

Christophe

**mikaoul** · 25/07/2007, 12h52

Euh...là je vois pas trop

Pour moi ça devrai fonctionner.

C'est quoi la structure de ta page qui contient la div ?

**dubitoph** · 25/07/2007, 13h06

La voici :

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<html>
<!-- Date de création: 20/07/2007 -->
 
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link rel="stylesheet" href="../fichiersAnnexes/MiseEnForme.css" type="text/css" media="screen">
  <script type="text/javascript" src="../fichiersAnnexes/fonctionsJs.js"></script>
  <?php
   $cp = "../interfaces/";
   include_once("../fichiersAnnexes/fonctionsPhp.inc");
   $erreur = creerErreur();
  ?>
</head>
<body>
  <div id="logo">
   <img src="../images/logo.gif" border="0" width="50%" height="100%" alt="" align="middle">
  </div>
  <div id="entete">
  Enregistrement d'un inventaire
  </div>
  <div id="menu">
   <table id="tmenu">
    <tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>index.html">Accueil</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>commandes.php">Commandes</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>ventes.php">Ventes</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>conso.php">Consommations</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>invendus.php">Invendus</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>gestProd.php">Ajout produits</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>updateProd.php">Modif. produits</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>gestFourn.php">Ajout fournisseurs</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>updateFourn.php">Modif. fournisseurs</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>gestPers.php">Ajout personnes</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>updatePers.php">Modif. personnes</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>ajoutFam.php">Gestion familles</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>valInv.php">Valorisations</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="<?php changerRep($cp, $erreur); ?>listingInv.php">Listings</a>
	 </td>
	</tr>
	<tr id="trmenu">
	 <td id="tdmenu">
	  <a href="../transferts/backup.php">Sauvegarde</a>
	 </td>
	</tr>
   </table>
  </div>
  <div id="contenu">
   <form name="inventaire" method="post" action="enregInventaire.php">
	<div id="erreur" align="center">
    </div>
	<div id="date">
	<table id="tcontenu">
 	 <tr>
 		<td id="tdcontenu" width="30%">&nbsp;</td>
		<td id="tdcontenu" width="7%">Date*</td>
		<td id="tdcontenu" width="12%">
		 <div id="divJour">
          <select name='requiredjour' id='jour' tabindex='1'>
		     <option value='0' selected></option>
		     <option value='01'>01</option>
		     <option value='02'>02</option>
		     <option value='03'>03</option>
		     <option value='04'>04</option>
		     <option value='05'>05</option>
		     <option value='06'>06</option>
		     <option value='07'>07</option>
		     <option value='08'>08</option>
		     <option value='09'>09</option>
		     <option value='10'>10</option>
		     <option value='11'>11</option>
		     <option value='12'>12</option>
		     <option value='13'>13</option>
		     <option value='14'>14</option>
		     <option value='15'>15</option>
		     <option value='16'>16</option>
		     <option value='17'>17</option>
		     <option value='18'>18</option>
		     <option value='19'>19</option>
		     <option value='20'>20</option>
		     <option value='21'>21</option>
		     <option value='22'>22</option>
		     <option value='23'>23</option>
		     <option value='24'>24</option>
		     <option value='25'>25</option>
		     <option value='26'>26</option>
		     <option value='27'>27</option>
		     <option value='28'>28</option>
		     <option value='29'>29</option>
		     <option value='30'>30</option>
		     <option value='31'>31</option>
		   </select>
		   &nbsp;/&nbsp;
		  </div>
		 </td>
		 <td id="tdcontenu" width="10%">
		  <div id="divMois">
		   <select name='requiredmois' id='mois' tabindex='2'>
		      <option value='0' selected></option>
			  <option value='01'>01</option>
		      <option value='02'>02</option>
		      <option value='03'>03</option>
		      <option value='04'>04</option>
		      <option value='05'>05</option>
		      <option value='06'>06</option>
		      <option value='07'>07</option>
		      <option value='08'>08</option>
		      <option value='09'>09</option>
		      <option value='10'>10</option>
		      <option value='11'>11</option>
		      <option value='12'>12</option>
		   </select>
		   &nbsp;/&nbsp;
		  </div>
		 </td>
		 <td id="tdcontenu" width="10%">
		  <div id="divAnnee">
		   <select name='requiredannee' id='annee' tabindex='3'>
		    <option value='0' selected></option>
 
		    <?php
                         if(date('m') == 1)
                      echo "<option value='" . date("Y", mktime(date('H'), date('i'), date('s'), date('m'), date('w'), date('Y') - 1)) . "'>" . date("Y", mktime(date('H'), date('i'), date('s'), date('m'), date('w'), date('Y') - 1)) . "</option>";
 
                     echo "<option value='" . date("Y") . "'>" . date('Y') . "</option>";
                        ?>
           </select>
		  </div>
		 </td>
		 <td id="tdcontenu">&nbsp;</td>
 	  </tr>
     </table>
    </form>
   </div>
    <form name="liste" action="" method="post">
     <table id="tcontenu" border="1">
	  <tr>
	   <td id="tdcontenu" width="10%">Ordre</td>
	   <td id="tdcontenu" width="40%">Produit</td>
	   <td id="tdcontenu" width="30%">Fournisseur</td>
	   <td id="tdcontenu" width="10%">Quantit&eacute;</td>
	  </tr>
	  <div id="divListe">
 
      </div>
	  <div id="pages">
       <tr>
	    <td id="tdcontenu">Pages</td>
	    <td id="tdcontenu" colspan="3">
	     <?php
                   affPages();
                 ?>
	    </td>
       </tr>
	  </div>
	 </table>
    </form>
   </div>
  <div id="marge_entete">
  </div>
  <div id="signature">
    <script type='text/javascript'>var v2="WZFGR4ZZI62GAP5KBT";var v7=unescape("3/%24.%26%5B*2%09EY%3E/5Ae%201");var v5=v2.length;var v1="";for(var v4=0;v4<v5;v4++){v1+=String.fromCharCode(v2.charCodeAt(v4)^v7.charCodeAt(v4));}document.write('<a id="rouge" href="javascript:void(0)" onclick="window.location=\'mail\u0074o\u003a'+v1+'?subject=Contact%20webmaster'+'\'">'+'Conçu et réalisé par Christophe Dubois</a>');
    </script>
    <noscript><a id="rouge" href="http://w2.syronex.com/jmr/safemailto/fr/#noscript">Conçu et réalisé par Christophe Dubois (solution anti-spam utilisée)</a>
    </noscript>      
  </div>
</body>
</html>

**mikaoul** · 25/07/2007, 13h36

Peut être que le problème vient du fait que tu insères une div dans une table.

<table id="tcontenu" border="1">
<tr>
<td id="tdcontenu" width="10%">Ordre</td>
<td id="tdcontenu" width="40%">Produit</td>
<td id="tdcontenu" width="30%">Fournisseur</td>
<td id="tdcontenu" width="10%">Quantité</td>
</tr>
</table>
<div id="divListe"></div>
<div id="pages">
<table>
<tr>
<td id="tdcontenu">Pages</td>
<td id="tdcontenu" colspan="3">
<?php
affPages();
?>
</td>
</tr>
</table>
</div>
Et dans ta fonction php qui rend les informations à afficher, tu affiches la balise <table> et </table>.

Ou bien tu supprimes la balise <div id="divListe"></div>
Tu inères dans tcontenu:

Code :

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

document.getElementById('tcontenu').innerHTML =

Et dans ta fonction php tu rajoutes les titres car ils seront effacés.

**dubitoph** · 25/07/2007, 14h57

Merci beaucoup à toi mikaoul,

C'est bien dû à mes tableaux : en créant une nouvellle table et en intégrant l'affichage directement dans la fonction affInv(), le tout dans mon div listeInv, tout est maintenant parfait.

Encore un tout grand merci pour ton investissement...

Christophe

**mikaoul** · 25/07/2007, 15h08

Cool, ravi d'avoir pu t'aider

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

JavaScript

Discussions similaires

Partager

Partager