Discussion :

[sylvain257]

Bonjour,


J'ai développé une application cartographique pour indexer des photos. L'édition des données des photos se fait via un formulaire qui comporte une liste déroulante (en l’occurrence la collection).
J'ai une fonction JS qui peuple cette liste déroulante (select) avec une API et un appel AJAX.

Le problème est que bien que je fasse appel à cette fonction au moment de la validation du formulaire, la liste déroulante ne se rafraîchit pas. L'appel à l'API est exécuté comme il faut mais la liste déroulante n'est pas MAJ. Une purge du cache règle le problème, mais c'est pénible de rafraîchir systématiquement la page.

Quelqu'un aurait une piste pour régler ce pb ?

Merci pour vos retours

Sylvain

[domi65]

L'appel à l'API est exécuté comme il faut mais la liste déroulante n'est pas MAJ

Quel est la réponse de l'ajax et qu'est ce que tu en fais (donne-nous le code) ?
merci.

[sylvain257]

Voila la fonction qui peuple la liste déroulante.

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
 function SelectCollection(){; 
  $.ajax({
    url: ******,
    type: 'GET',
    datatype: 'json',
    complete: function(res) {
        var record = res.responseJSON.records;
 
        i=0;
        for(i=0;i<record.length;i++){
 
          $('#id_select_collection').append($('<option>').html(record[i].nom_collection).val(record[i].id));
 
        }
      }
    })
  }

et le retour JSON : (je ne peux pas partager l'url d'appel à l'API)

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
{
    "total": 3,
    "records": [
        {
            "id": 1,
            "nom_collection": "Collection Dupond",
            "nb_doc": 1155
        },
        {
            "id": 2,
            "nom_collection": "Collection Martin",
            "nb_doc": 14
        },
        {
            "id": 3,
            "nom_collection": "Collection François Gilbert",
            "nb_doc": null
        }
    ]
}

MAJ : Pour information, le formulaire se situe dans une modale Materialize.... Il est possible que cela ait une importance

Merci :-)

[Toufik83]

Bonjour,

Il faut supprimer le contenu du <select> avant la boucle à chaque fois qu'il y'a une réponse ajax :

Code :

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

1
2
3
4
$('#id_select_collection').html("");//ici
for(i=0;i<record.length;i++){
   ....
}

$.append rajoute du HTML au <select>, mais elle n'efface pas le contenu précédent.

[sylvain257]

OK. Et comment faire pour garder la valeur courante du select ? (par ce que la donnée est nulle par défaut, mais c'est normalement un champ renseigné...)
Merci

[Toufik83]

Tu peux forcer la valeur du select en utilisant la valeur du champ renseigné après la boucle for comme suite :

Code :

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

1
2
3
4
for(i=0;i<record.length;i++){
   ....
}
$('#id_select_collection').val("valeur renseignée...");