Mise à jour SELECT à réception des données

Version imprimable

09/06/2017, 15h15
pas30

Mise à jour SELECT à réception des données

Voici une page que je réalise actuellement : http://www.1clic1don.fr/inscription2.php
Sur cette page, la saisie du code postal va automatiquement remplir le select de la ville et ce dès que le code postal saisi a la taille de 5 caractères dont qu'il est complet. Celà fonctionne. Toutefois je constate quelquechose de pas très claire, si après avoir saisi les 5 caractères du code postal je clique de suite sur le select çà ne marche pas il n'y a rien dedans il faut attendre il semble pour qu'il se remplisse. Auriez vous un moyen pour contourner ce souci ? L'évènement que j'utilise pourtant est .on('change' donc normalement dès la saisie des 5 caractères du code postal il devrait déjà commencer à modifier le select.
MAJ : Alors finalement il semble que ce soit l'évènement change le souci il ne se déclenche pas à chaque saisie d'un caractère dans l'input box il y a que lorsque je clique à côté de l'input que l'évènement se déclenche. Quelqu'un aurait une idée ???
10/06/2017, 14h53
mathieu

je viens de faire un essai et au moment où je tape le 5e caractère, la requête AJAX est lancé et la réponse se fait en 0,1 secondes donc le temps que je clique sur le choix de la ville, le menu déroulant est déjà rempli donc je ne vois pas de problème

ensuite si vous voulez que le chargement se fasse quand on tape un chiffre, essayez l'évènement "keyup" au lieu de "input"
https://api.jquery.com/keyup/

P.S. : je viens de relire votre code et avant de lancer l'appel AJAX, vous testez s'il y a 5 caractères donc c'est peut-être pour cela que cela ne fonctionne pas comme vous voulez.
il faudrait que vous fassiez le minimum de débogage si vous voulez savoir ce qui ce passe et cela commence par afficher les différentes étapes de votre code ainsi que les contenus de variables concernées.

Bonjour,
je rajouterais à ce qu(à écrit mathieu que la logique de la fonction n'est pas des meilleurs

Je mets ton code ici

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
$(function () {
  $('#cp').on('input', function () {
    var val = $(this).val(); // on récupère la valeur cp
    var nb = val.length;
    if (nb == 5) {
      var objData = {
      };
      objData = {
        codePostal: val,
        maxRows: 10
      };
      if (val != '') {
        $('#ville').empty(); // on vide la liste des villes
        $.ajax({
          url: './getville.php',
          data: objData,
          dataType: 'json',
          type: 'POST',
          success: function (data) {
            var nbrep = data.length;
            if (nbrep > 0) {
              $('#ville').append('<option value="" selected>Sélectionnez votre ville</option>');
              $.map(data, function (item)
              {
                $('#ville').append('<option value="' + item.Id + '">' + item.Ville + '</option>');
              });
            }
          }
        });
      }
    }
  });
});

la liste devrait être nettoyer si la longueur est inférieure à 5, risque d'envoi erroné et certains test ne sont pas « utiles »

Code:

1
2
3
4
5
6
7
8
9
  $('#cp').on('input', function () {
    var nb = val.length;
    if (nb == 5) {
      ...
      if (val != '') {
        $('#ville').empty(); // on vide la liste des villes
      }
    }
  });