[RESOLU] jQuery : MàJ de 2 champs d'après une liste déroulante

par **albat** » 06 avr. 2016, 17:44

T'as pas une glace au poulpe à finir au lieu de persifler ? <:)

par **@rthur** » 06 avr. 2016, 16:25

Yes, ça marche !!!
Merci infiniment pour votre aide !

Oh bah c'est normal... ça fait toujours plaisir d'aider les petits jeunes qui débutent

par **albat** » 06 avr. 2016, 16:18

Yes, ça marche !!!
Merci infiniment pour votre aide !

Voici le code qui fonctionne :
tirelire_ajax.php

<?php
require_once('_init.php');
$sql_11 = 'SELECT txo_descriptifFR, txo_descriptifEN
           FROM   txo_taxes
           WHERE  txo_codeproduit = "'.$_POST['codeprod'].'"';
$res_11 = mysqli_query($dbase, $sql_11) or die(mysqli_error($dbase));
$lig_11 = mysqli_fetch_assoc($res_11);
extract($lig_11);
echo json_encode(array('FR'=>$txo_descriptifFR, 'EN'=>$txo_descriptifEN));
?>

tirelire.php

<script src="_js/jquery-2.2.2.js"></script>
<script>
$(document).ready(function()
  { $("#in_codeproduit").change(function()
                                { $("#in_descriptifFR").empty();
                                  $("#in_descriptifEN").empty();
                                  if ($("#in_codeproduit").val()!='')
                                     { $.post( 'tirelire_ajax.php',
                                               { codeprod : $("#in_codeproduit").val()
                                               },
                                               descriptifs,
                                               'json'
                                             );
                                     }
                                } );
  } );

function descriptifs(data)
{ $("#in_descriptifFR").attr("disabled", false).html(data['FR']);
  $("#in_descriptifEN").attr("disabled", false).html(data['EN']);
}
</script>

par **albat** » 06 avr. 2016, 16:02

Le 3ème paramètre doit être une fonction et non une chaine de caractère donc supprime les guillemets.

Merciiiiiii !
L'appel se fait bien, j'ai vu l'alerte 5.
il me reste à éplucher le json_encodage de mon résultat...

Je progresse...

par **@rthur** » 06 avr. 2016, 14:08

Regarde ta console réseau, normalement l'appel se fait bien.

https://api.jquery.com/jquery.post/
Le 3ème paramètre doit être une fonction et non une chaine de caractère donc supprime les guillemets.

Par ailleurs, le 4ème paramètre est facultatif, mais si tu lui indiques json et que ton JSON de tirelire_ajax.php est malformé alors tu ne verras pas non plus l'alert(5) car le callback va échouer sur le format.

par **albat** » 06 avr. 2016, 13:29

C'est l'appel de la requête qui ne se fait pas.

Le code en cause est donc celui-ci :

{ $.post( 'tirelire_ajax.php',
          { codeprod : $("#in_codeproduit").val()
          },
          'descriptifs',
          'json'
        );
}

par **albat** » 06 avr. 2016, 10:26

Pour la variable javascript préfixée par $, ça sent le copier/coller un peu rapide depuis du code PHP...
Mea complètement culpa.

J'ai apporté quelques corrections et cela semble avoir débloqué certaines choses.
À présent, même si le résultat escompté n'est pas encore atteint,
j'ai au moins les alertes 1, 2 et 3 qui s'affichent.

Apparemment, il faut que je corrige mon appel Ajax à la requête... ou le retour de son résultat.

<script src="_js/jquery-2.2.2.js"></script>
<script>
$(document).ready(function()
  { alert('1');  // ALERTE 1
    $("#in_codeproduit").change(function()
                                { alert('2');  // ALERTE 2
                                  $("#in_descriptifFR").empty();
                                  $("#in_descriptifEN").empty();
                                  if ($("#in_codeproduit").val()!='')
                                     { alert('3');  // ALERTE 3
                                       $.post( 'tirelire_ajax.php',
                                                { codeprod : $("#in_codeproduit").val()
                                                },
                                               'descriptifs',
                                               'json'
                                             );
                                     }
                                     else alert('4');  // ALERTE 4
                                } );
  } );

function descriptifs(data)
{ alert('5');  // ALERTE 5
  $("#in_descriptifFR").attr("disabled", false);
  $("#in_descriptifFR").html(data.FR);
  $("#in_descriptifEN").attr("disabled", false);
  $("#in_descriptifEN").html(data.EN);
}
</script>

par **@rthur** » 06 avr. 2016, 00:09

Bah au moins c'est clair, aucune de tes requêtes ajax n'est envoyée. Donc maintenant avec le Débogueur JS de ton navigateur tu peux mettre des points d'arrêts aux différents endroits de ton script et voir pourquoi il ne rentre pas dans les fonctions que tu as mises en place.

Code : Tout sélectionner

var $in_codeproduit

Je ne sais pas si c'est problématique ou pas mais en javascript, les noms de variable n'ont habituellement pas de $ devant.

Si possible upload ton code sur une page quelque part (ou un jsfiddle), car c'est curieux que tu n'ai pas d'erreur dans la console

par **albat** » 05 avr. 2016, 11:23

Dans la console réseau, je surveille "avertissements", "erreurs" et "XHR" : aucun appel visible
Dans les logs, les différents fichiers requis (dont jquery.js) sont bien appelés.

Dans le moniteur réseau, aucun appel XHR, et jquery.js dans les appels JS.

par **@rthur** » 04 avr. 2016, 20:59

Sous Firefox : Ctrl+Maj+i > Débogueur

par **albat** » 04 avr. 2016, 20:41

L'inspecteur de script, je le chope où ?

par **@rthur** » 04 avr. 2016, 19:50

Ce qui m'embête le plus, c'est qu'aucune des 5 alertes ne s'affiche.
J'en déduis donc que le script n'est pas appelé.

Dans la console réseau de ton navigateur, tu vois les appels ou pas ?

Sinon, tu peux utiliser l'inspecteur de script dans ton navigateur et mettre des points d'arrêts pour voir les valeurs des variables et voir si ton javascript est exécuté correctement.

par **albat** » 04 avr. 2016, 16:47

Bon, j'ai rajouté le json_encode() parce que sinon, ça aurait du mal à bien marcher.
Voici la dernière mouture, et comme toujours, rien ne se passe.
même pas un message d'erreur dans la console...

Ce qui m'embête le plus, c'est qu'aucune des 5 alertes ne s'affiche.
J'en déduis donc que le script n'est pas appelé.
Mais pourquoi donc ???

tirelire_paiement.php

<head>
...
<script type="text/javascript" src="_js/jquery-2.2.1.min.js" />
<script type="text/javascript">
$(document).ready(function()
                  { alert('1');
                    var $in_codeproduit  = $('#in_codeproduit');
                    $in_codeproduit.on('change', function()
                                                 { alert('2');
                                                   $('#in_descriptifFR').empty();
                                                   $('#in_descriptifEN').empty();
                                                   var produit = $(this).val();
                                                   if(produit!='')
                                                     { alert('3 : ' + produit);  // ALERTE 3
                                                       $.ajax( { type:     'get',
                                                                 url:      'tirelire_ajax_catalogue.php',
                                                                 data:     'in_codeproduit='+ produit,
                                                                 dataType: 'json',
                                                                 success:  function(data)
                                                                           { alert('5');
                                                                             $('#in_descriptifFR').html(data.FR);
                                                                             $('#in_descriptifEN').html(data.EN);
                                                                           }
                                                               } 
                                                             );
                                                     }
                                                     else alert('4');
                                                 }
                                      );
                 }
</script>
</head>

tirelire_ajax_catalogue.php

<?php
require_once('_init.php'); // Connexion à la BD

$req_11 = 'SELECT txo_descriptifFR, txo_descriptifEN
           FROM   txo_taxes
           WHERE  txo_codeproduit = "'.$_GET['in_codeproduit'].'"';
$res_11 = mysqli_query($dbase, $sql_11) or die(mysqli_error($dbase));
$lig_11 = mysqli_fetch_assoc($res_11);
extract($lig_11);
$reponse = array('FR'=>$txo_descriptifFR, 'EN'=>$txo_descriptifEN);
echo json_encode($reponse);
?>

par **Nagol** » 01 avr. 2016, 17:23

tous le code doit se trouver dans head, la tu essayes d'utilise $.ajax avant que jquery soit loadé potentiellement.

$(document).ready(function(){}); est une manière de s'assurer que tout est bien loadé niveau jquery avant de tenter d'exécuter du code utilisateur.

par **albat** » 01 avr. 2016, 16:26

Seules les alertes 2 et 3 sont déclenchées.
L'alerte 3 me permet de vérifier que la valeur de la variable produit est correcte.

Je ne comprends pas l'absence de l'alerte 1, mais ce n'est pas essentiel.

En revanche, l'alerte 5 n'a pas lieu, ce qui prouve que le success n'est pas au rendez-vous...

<head>
    ...
    <script type="text/javascript" src="_js/jquery-2.2.1.min.js" />
    <script type="text/javascript">
    $(document).ready(function()
                     { alert('1');   // ALERTE 1
                     }
    </script>
</head>

<body>
    ...

    <script type="text/javascript">
    var $in_codeproduit  = $('#in_codeproduit');
    var $in_descriptifFR = $('#in_descriptifFR');
    var $in_descriptifEN = $('#in_descriptifEN');
    $in_codeproduit.on('change', function()
                                 { alert('2');  // ALERTE 2
                                   $in_descriptifFR.empty();
                                   var produit = $(this).val();
                                   if (produit!='')
                                      { alert('3 : ' + produit);  // ALERTE 3
                                        $.ajax( { type:     'get',
                                                  url:      'tirelire_ajax_catalogue.php',
                                                  data:     'in_codeproduit='+ produit,
                                                  dataType: 'json',
                                                  success: function(json)
                                                           { alert('5');  // ALERTE 5
                                                             $.each(json, function(value1, value2)
                                                                          { $in_descriptifFR.html(value1);
                                                                            $in_descriptifEN.html(value2);
                                                                          }
                                                                    );
                                                           }
                                                } 
                                              );
                                      }
                                      else alert('4');  // ALERTE 4
                                 }
                      );
    </script>
</body>

[RESOLU] jQuery : MàJ de 2 champs d'après une liste déroulante

Répondre

Étendre la vue Revue du sujet : [RESOLU] jQuery : MàJ de 2 champs d'après une liste déroulante

Re: [RESOLU] jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante

Re: jQuery : MàJ de 2 champs d'après une liste déroulante