[AJAX] Afficher résultat sql à la volée

Version imprimable

Bonjour

J'essaye d'afficher les résultats d'une requête SQL ligne par ligne (au fur et à mesure de l'exécution de ma requête), sans avoir à rafraîchir ma page.

Voici mon code qui appelle la fonction js ShowUser (simplifié) - fichier geocode.php

Code:

1
2
3
4
5
6
7
8
9
10
11
 
<p>
<div id="719"><b>719 - Usersss info will be listed here.</b></div>
</p>
 
<p>
<div id="727"><b>727-User info will be listed here.</b></div>
</p>
 
<script type="text/javascript" >showUser(719)</script> 
<script type="text/javascript" >showUser(727)</script>

Voici le code JS - fichier select.js

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
 
var xmlHttp
var ID
 
 
function showUser(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
 
var url="getcoord.php"
url=url+"?nrID="+str
url=url+"&sid="+Math.random()
ID=str
xmlHttp.open("GET",url,true)
xmlHttp.onreadystatechange=stateChanged
xmlHttp.send(null)
}
 
function stateChanged() 
{ 
//prompt("NO",ID)
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
//prompt("YES",ID)
 document.getElementById(ID).innerHTML=xmlHttp.responseText 
 } 
}
 
 
 
 
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

La requête sql qui recupère les infos à afficher (simplifiée) - fichier getcoord.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
echo "<table border='1'>
...
 
while ($row = @mysql_fetch_assoc($result)) {
.....
			  $geocode_pending = false;
			  echo "<tr>";
			  echo "<td>" . $row['id'] . " </td>";
			  echo "<td>" . $row['name'] . " </td>";
 			  echo "<td>" . $row['address'] . " </td>";
			  echo "<td>" . $row['zip'] . " </td>";
			  echo "<td>" . $row['city'] . " </td>";
			  echo "<td>" . $row['state'] . "TEST </td>";
			  echo "<td>" . $row['country'] . " </td>";
 			  echo "<td>" . $status . " = failed to geocoded</td>";
			  echo "</tr>";
			}
 
 
echo "</table>";

Si je ne mets pas des alert dans le js, seul le dernier enregistrement de la requête s'affiche.
Si je mets des alert, tous les enregistrements sont affichés

J'ai modifié le code js de la manière suivante :

Code:

1
2
3
4
5
6
7
xmlHttp.open("GET",url,false)
xmlHttp.onreadystatechange=stateChanged
xmlHttp.send(null)
}

function stateChanged() ....

Aucun résultat n'est affiché

Comment faire pour attendre que la fin de l'exécution du premier appel de la fonction js avant de passer à la suivante (est-ce la solution ?) ?

Code:

1
2
3
 
<script type="text/javascript" >showUser(719)</script> 
<script type="text/javascript" >showUser(727)</script>

Merci d'avance pour votre aide
Patrice

12/12/2008, 22h52
RomainVALERI

As-tu pensé à grouper les deux appels ajax en un seul, en passant un tableau de paramètres plutôt qu'un paramètre isolé ?
Tu adapterais le traitement côté serveur en renvoyant une chaine de résultats séparés par un simple caractère de convention, que tu redécouperais en javascript à l'arrivée pour appliquer les contenus reçus aux éléments...

Et heu... juste par curiosité : c'est normal que la première ligne de ton extrait php n'ait pas son ";" final ?

Merci de ta réponse
Il y a bien une ; dans mon code original (mauvais copier coller).

en fait il n'y a pas que deux appels. Je génère la ligne d'appel à la fonction js dans une boucle à partir du fichier geocode.php

Je ne connais par avance le nombre d'appels que je vais effectuer. Tout dépend du résultat rendu par la première sql (je ne l'avais pas montré dans mon premier post dans un but de simplification).
Voici le code contenant la boucle (fichier geocode.php)
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 // Opens a connection to a MySQL server $connection = mysql_connect($host, $username, $password); if (!$connection) { die("Not connected : " . mysql_error()); } // Set the active MySQL database $db_selected = mysql_select_db($database, $connection); if (!$db_selected) { die("Can\'t use db : " . mysql_error()); } // Select all the rows in the markers table $query = "SELECT * FROM markers WHERE lat=0"; $result = mysql_query($query); if (!$result) { die("Invalid query: " . mysql_error()); } // Iterate through the rows, geocoding each address while ($row = @mysql_fetch_assoc($result)) { ?> <div id=<? echo $row['id']; ?>><b>Result of sql will be listed here after JS execution.</b></div> <script type="text/javascript" >showUser(<? echo $row['id']; ?>)</script> <? } ?>
Ton idée peut-elle marcher avec cette nouvelle donnée ?

Merci
Patrice

13/12/2008, 10h55
RomainVALERI

D'accord je n'avais pas compris que le nombre de liens était calculé, mais :

Pourquoi alors ne pas directement faire les requêtes vers geocode (que tu voulais effectuer avec ajax après chargement de la page) quand tu construis celle-ci ? :?
13/12/2008, 13h33
patrice.salem

La requete que j'appelle après chargement de la page geocode.php effectue une géolocalisation basée sur l'API de googlemap. Chaque recherche d'adresse prend environ 1s à 2s (requete dans getcoord.php).

Si je lance cette requete dans geocode.php, l'utilisateur peut attendre plusieurs minutes (en fonction du fichier d'adresses) sans que rien ne semble se dérouler.

Pour cette raison, je désire afficher le résultat de la géolocalisation après le traitement de chaque adresse sans avoir à recharger la page geocode.php pour chaque adresse traitée.

Patrice
15/12/2008, 19h20
patrice.salem

Bonjour

Quelqu'un pourrait me donner quelques tuyaux pour résoudre mon petit souci ?

Merci d'avance
patrice

Solution trouvée

geocode.php

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
 
 
<script language="javascript" type="text/javascript" src="select.js"></script>
 
 
 
<?
require '.....dbinfo.php';
// Opens a connection to a MySQL server
$connection = mysql_connect($host, $username, $password);
if (!$connection) {
  die("Not connected : " . mysql_error());
}
 
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die("Can\'t use db : " . mysql_error());
}
 
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE lat=0";
$result = mysql_query($query);
if (!$result) {
  die("Invalid query: " . mysql_error());
}
 
 
// Iterate through the rows, geocoding each address
while ($row = @mysql_fetch_assoc($result)) {
?> 
<script type="text/javascript" >ajaxFunction(<? echo $row['id']; ?>)</script>
<p>
<div id="<? echo $row['id']; ?>"<b><? echo $row['id']; ?>-User info will be listed here.</b></div>
</p>
 
 
 
 
<?
  }
 
 
?>
 
</body>
</html>

select.js

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
 
function ajaxFunction(ID){
 var ajaxRequest;  // The variable that makes Ajax possible!
 var ID;
 
 try{
   // Opera 8.0+, Firefox, Safari
   ajaxRequest = new XMLHttpRequest();
 }catch (e){
   // Internet Explorer Browsers
   try{
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
   }catch (e) {
      try{
         ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }catch (e){
         // Something went wrong
         alert("Your browser broke!");
         return false;
      }
   }
 }
 // Create a function that will receive data
 // sent from the server and will update
 // div section in the same page.
 ajaxRequest.onreadystatechange = function(){
   if(ajaxRequest.readyState == 4){
   	  //prompt (ajaxRequest.responseText,ID);
      document.getElementById(ID).innerHTML=ajaxRequest.responseText;
	  //var ajaxDisplay = document.getElementById(ajaxdiv);
      //ajaxDisplay.value = ajaxRequest.responseText;
   }
 }
 // Now get the value from user and pass it to
 // server script.
 
 
var str = ID;
var url="getcoord.php"
url=url+"?nrID="+str
url=url+"&sid="+Math.random()
ajaxRequest.open("GET", url , true);
ajaxRequest.send(null);
}

getcoord.php (gere la sql qui interroge la bdd et l'api de GoogleMaps)

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<?php
require '....dbinfo.php';
 
 
define("MAPS_HOST", "maps.google.com");
define("KEY", "PUT YOUR KEY HERE");
 
$nrID=$_GET["nrID"];
 
 
// Opens a connection to a MySQL server
$connection = mysql_connect($host, $username, $password);
if (!$connection) {
  die("Not connected : " . mysql_error());
}
 
// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die("Can\'t use db : " . mysql_error());
}
 
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE id=".$nrID;
$result = mysql_query($query);
if (!$result) {
  die("Invalid query: " . mysql_error());
}
 
// Initialize delay in geocode speed
$delay = 0;
$base_url = "http://" . MAPS_HOST . "/maps/geo?output=csv&key=" . KEY;
 
 
echo "<table border='1'>
<tr>
<th>ID</th>
<th>Company</th>
<th>Address</th>
<th>Zip</th>
<th>City</th>
<th>State</th>
<th>Country</th>
<th>Status</th>
</tr>";
 
 
// Iterate through the rows, geocoding each address
while ($row = @mysql_fetch_assoc($result)) {
  $geocode_pending = true;
 
  while ($geocode_pending) {
        $company = $row["name"];
        $address = $row["address"] . "," . $row["zip"] . "," . $row["city"] . "," . $row["state"] . "," . $row["country"];
    $id = $row["id"];
    $request_url = $base_url . "&q=" . urlencode($address);
    $csv = file_get_contents($request_url) or die("url not loading");
 
    $csvSplit = split(",", $csv);
    $status = $csvSplit[0];
    $lat = $csvSplit[2];
    $lng = $csvSplit[3];
    if (strcmp($status, "200") == 0) {
      // successful geocode
      $geocode_pending = false;
      $lat = $csvSplit[2];
      $lng = $csvSplit[3];
          
          //echo "The company " . $company. " " . $address . " was correctly geocoded. ";
      //echo "         ---->    Received lat and long = " . $lat . ";" . $lng . "\n <br>";
 
      $query = sprintf("UPDATE markers " .
             " SET lat = '%s', lng = '%s' " .
             " WHERE id = %s LIMIT 1;",
             mysql_real_escape_string($lat),
             mysql_real_escape_string($lng),
             mysql_real_escape_string($id));
      $update_result = mysql_query($query);
      if (!$update_result) {
        die("Invalid query: " . mysql_error());
      }
    
          } else if (strcmp($status, "620") == 0) {
      // sent geocodes too fast
      $delay += 100000;
    } 
        
        else {
      
                          // failure to geocode
                          $geocode_pending = false;
                          echo "<tr>";
                          echo "<td>" . $row['id'] . " </td>";
                          echo "<td>" . $row['name'] . " </td>";
                          echo "<td>" . $row['address'] . " </td>";
                          echo "<td>" . $row['zip'] . " </td>";
                          echo "<td>" . $row['city'] . " </td>";
                          echo "<td>" . $row['state'] . "TEST </td>";
                          echo "<td>" . $row['country'] . " </td>";
                          echo "<td>" . $status . " = failed to geocoded</td>";
                          echo "</tr>";
                        }
                        
    }
    usleep($delay);
        
  }
 
echo "</table>";
?>

en espérant que cette solution serve à d'autres
patrice:yaisse2: