Ajax retourne la précedente valeur selectionnée

edmondsarran
Javascript

Bonjour,

Je suis encore débutant et je rencontre un petit problème avec ajax.

J'essaye d'afficher un diagramme en barre (ECharts) en fonction de donnée d'une base de données, après une sélection dans une liste déroulante.
Tout marche ou presque.
Je sélectionne un territoire dans une liste déroulante, la requête SQL s'exécute, envoie un json dans l'Ajax, et le diagramme en bar fonctionne, mais :
Il ne fonctionne que après deux sélections de territoire et n'affiche que les données du précédent territoire sélectionné...
Voici mon ajax, le problème doit certainement venir de là :

    $territoire.on('change', function() {
        var val = $(this).val(); 

    $.ajax({
        url: './php/CSP.php',
        type: 'GET',
        data: 'id_territoire=' + val, 
        dataType: 'json',
        success: function(CSP) {
              arti      = CSP[0].arti;
              cadre     = CSP[0].cadre;
              interme   = CSP[0].interme;
              employe   = CSP[0].employe;
              ouvrier   = CSP[0].ouvrier;
        }
    });

Donc j'aimerais qu'il me charge dans les dernières valeurs selectionnées, et non les valeurs précedentes.

Merci pour votre aide

2 réponses

FactureHero.com

Hello, 2 questions :

1/ $territoire, c'est ton select ou un formulaire ?

2/ C'est normal que ta fonction on ainsi que sa callback ne soient pas fermées dans les code que tu as posté ? (il manque à la fin '})'

Sinon au début je pensais que c'étais lié à l'evenement change, mais je viens de faire un bout de code sur jsfiddle et il se déclenche bien au clic sur un élément de la liste déroulance => https://jsfiddle.net/learnlab/425wdjn7/

FactureHero.com

A priori si ta variables territoire est bien l'élément <select> du DOM, tout devrait fonctionner. Pour en voir le coeur net positionne un console.log dans ta callback de success et regardes si il s'affiche dans la console du navigateur: 

$territoire.on('change', function() {
        var val = $(this).val(); 

    $.ajax({
        url: './php/CSP.php',
        type: 'GET',
        data: 'id_territoire=' + val, 
        dataType: 'json',
        success: function(CSP) {
              console.log("OK");
              /*
              arti      = CSP[0].arti;
              cadre     = CSP[0].cadre;
              interme   = CSP[0].interme;
              employe   = CSP[0].employe;
              ouvrier   = CSP[0].ouvrier;
              */
              console.log(arti, cadre, interme, employe, ouvrier);
        }
    });

TEST

  • SI "OK" s'affiche bien dans la console quand tu sélectionne un élément de ta liste

  • SI les bonnes données s'affichent dans la console quand tu sélectionnes un élément de ta liste

ALORS c'est que tout va bien ici et que le problème se situe plutôt sur le script ou la librairie qui affiche ton diagramme.