Liste entrainant la modification d'un champs autocomplété

**lmplmp** · 26/08/2015, 18h50

Bonjour,

J'ai créé un code pour qu'un utilisateur choisisse un pays et qu'en fonction de ce choix, un champs de ville permette une auto-complétion appropriée. Par exemple en choisissant France, les villes françaises seulement seront éligibles pour l'auto-complétion qui suivra.
Mon problème se situe sur le retour de données de la page PHP appelée, (pour le moment, elle envoi juste deux noms de villes pour simplifier). Je ne vois pas comment récupérer le retour dans un tableau Javascript. Ce tableau permet, grâce à Jquery de lancer l'auto-complétion.

Voici mon code:

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
<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<?php
?>
  <script>
    $(function() {
      $("#idPays").on("change", function() {
        alert('pays changement');
        var idPays = $("#idPays").val();
        if (idPays != 0) {
          $.ajax({
            type: "POST",
            url: "page_genevilles.php",
            data: {
              "idPays": idPays
            },
            success: function(responseData) {
              alert(responseData);
              liste_villes_dispo = responseData;
              $("#villes").autocomplete({
                source: liste_villes_dispo
              });
              return;
            },
            error: function(XMLHttpRequest, textStatus, errorThrow) {
              console.log("Error: " + XMLHttpRequest.status);
              return;
            }
          });
        }
      });
    });
  </script>
  </head>
  <body>
    <select id="idPays">
      <?php
                        include('connexion_bdd.php');?>
        <option value="0">--- Pays ---</option>
        <?php                                   
        $query = mysql_query("SELECT ID_Pays, nom_pays_fr FROM Liste_Pays");
        while ($back = mysql_fetch_assoc($query)) {
          echo "\t\t\t\t<option value=\"" . $back['ID_Pays'] . "\">" . $back['nom_pays_fr'] . "</option>\n";
        }
        mysql_close();                  
        ?>
    </select>
    </span>
    </td>
    <td> <span id="boxDepartement"></span> </td>
    <td>Villes:</td>
    <td>
      <div class="ui-widget">
        <input id="villes"> </div>
      </p>
    </td>
    </tr>
    </tbody>
    </table>
    <center>
      <input type="submit" value="Lancer la recherche">
      <center>
        </form>
      </center>
<?php
?>

Et la page PHP minimale (pour le moment):

Code php :

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

1
2
3
<?php
echo '["lyon","paris"];';
?>

Lorsque je lance la page, dans la console, je vois apparaitre: GET http://....../%5B%22lyon%22,%22paris%22%5D; [HTTP/1.1 404 Not Found 208ms]

Je vous remercie d'avance de l'aide que vous voudrez bien m'apporter.

**NoSmoking** · 27/08/2015, 22h36

Bonjour,
il faut bien que tu comprennes que lorsque tu écris echo '["lyon","paris"];'; tu retournes une string au client, comme toujours d'ailleurs et que coté client tu reçois une string et non un tableau.

Regarde du coté de json_encode et de jQuery.ajax() notamment le dataType.

Liste entrainant la modification d'un champs autocomplété

AJAX

Discussions similaires

Partager

Partager