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

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

30 mars 2016, 13:36

Bonjour,

Ma femme vous le confirmera : "Pour le ménage, [je] n'ai jamais su me servir d'Ajax."
Nagol vous le confirmera : "Pour le dev web, [je] n'ai jamais su me servir d'Ajax."

Bref, j'ai un souci et je ne sais plus comment le débuguer.

La table cat_catalogue contient les champs :
- cat_id (entier auto-incrémenté, clé primaire)
- cat_codeproduit (varchar)
- cat_descriptifFR (text)
- cat_descriptifEN (text)

La page tirelire_paiement.php contient un formulaire de saisie.
Dans ce formulaire, je souhaite saisir le code produit (suggéré par une datalist, qui marche bien)
et voir s'afficher automatiquement les descriptifs associés à ce code produit (qui marchent pas).
J'utilise jQuery.

Je vois bien qu'il y a un schmurtz, mais je manque de clairvoyance, aujourd'hui.

Merci pour aide !

tirelire_paiement.php
<?php
$sql_01 = 'SELECT   cat_id, cat_codeproduit
           FROM     cat_catalogue
           GROUP BY cat_codeproduit
           ORDER BY cat_codeproduit';
$res_01 = mysqli_query($dbase, $sql_01) or die(mysqli_error($dbase));
?>
<form action="tirelire_enregistrement.php" method="post">
    <label for="in_codeproduit">code produit&nbsp;:</label>
    <input name="in_codeproduit" id="in_codeproduit" list="list_codeproduit" type="text" required />
    <datalist id="list_codeproduit">
        <?php
        while ($lig_01 = mysqli_fetch_assoc($res_01))
              { extract($lig_01);
                echo '<option value="'.$cat_id.'"> '.$cat_codeproduit.'</option>';
              }    
        ?>
    </datalist><br />
    <label for="in_descriptifFR" class="texte">descriptif FR&nbsp;:</label>
    <textarea name="in_descriptifFR" id="in_descriptifFR" required></textarea><br />
    <label for="in_descriptifEN" class="texte">descriptif EN&nbsp;:</label>
    <textarea name="in_descriptifEN" id="in_descriptifEN" required></textarea><br />
    <input type="submit" />
</form>
<script type="text/javascript">
$("#in_codeproduit").change(function()
                            { $.post( 'tirelire_ajax_catalogue.php',
                                      { codeproduit : $("#in_codeproduit").val();
                                      },
                                      function()
                                      { $("#in_descriptifFR").html(cat_descriptifFR);
                                        $("#in_descriptifEN").html(cat_descriptifEN);
                                      },
                                      'text'
                                    );
                            });
}
</script>
tirelire_ajax_catalogue.php
<?php
$req_11 = 'SELECT cat_descriptifFR, cat_descriptifEN
           FROM   cat_catalog
           WHERE  cat_codeproduit = "'.$_POST['in_codeproduit'].'"';
$res_11 = mysqli_query($dbase, $sql_11) or die(mysqli_error($dbase));
$lig_11 = mysqli_fetch_assoc($res_11);
extract($lig_11);
?>

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

30 mars 2016, 14:19

Je crois que je viens de voir un truc...

Puisque dans la datalist de mon champ de saisie #in_codeproduit,
c'est le cat_id qui est enregistré comme valeur,
je dois utiliser cat_id également dans ma requête SQL.

tirelire_ajax_catalogue.php
<?php
$req_11 = 'SELECT cat_descriptifFR, cat_descriptifEN
           FROM   cat_catalog
           WHERE  cat_id = '.$_POST['in_codeproduit'];
$res_11 = mysqli_query($dbase, $sql_11) or die(mysqli_error($dbase));
$lig_11 = mysqli_fetch_assoc($res_11);
extract($lig_11);
?>
Mais bon, ça marche toujours pas quand même. 8-|

ViPHP
ViPHP | 2287 Messages

30 mars 2016, 14:30

Hello albat, peux-tu bannir de ton vocabulaire l'expression "ça ne marche pas" stp :P Ce n'est pas acceptable pour un développeur de ton expérience, même si tu n'y comprends pas grand chose tu as au moins remarqué que ce code n'avait pas de pattes ce qui rend la ballade bien difficile :D

La requête ajax est-elle bien faite et envoie t-elle les bons paramètres en post comme tu les attends ? (tu peux valider cela dans ton firebug ou équivalent). Ça te permettra de sortir le mot "ajax" du problème et t'apportera au minimum la paix de l'esprit :)

Dans l'affirmative à la question ci-dessus, peux-tu faire un echo de la requête sql faite histoire de bien confirmer (là-aussi, résultat visible dans ton firebug).
Dans l'affirmative encore une fois, test de la requête à la main dans ta base de données pour vérifier qu'elle renvoie les datas attendues.
if([email protected]work()){ Nespresso(); } else { what(); }
______________________________

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

30 mars 2016, 17:28

le débugueur de firebug me dit :
TypeError: $(...).change is not a function
Or il me semble bien que l'évènement change() est géré par jQuery...

ViPHP
ViPHP | 3292 Messages

30 mars 2016, 17:56

change sur un input?
jquery fait des choses horribles donc peut-être...

Sinon pour info je n'ai aucun problème avec Ajax, mais ne me demandez pas de faire du jquery, c'est une absurdité d'utiliser une bibliothèque qui ne facile en rien la vie et rajoute des bugs et de la lourdeur alors qu'on peut le faire soi même en autant de code personnel que ce qu'il faut pour utiliser jquery.
Fait du php depuis que ca existe ou presque :)

ViPHP
ViPHP | 2287 Messages

30 mars 2016, 19:55

@albat jQuery est-il bien lié dans ta page de test ? Ça pourrait expliquer ton erreur, et c'est impossible à vérifier avec les codes que tu as copiés jusqu'ici. En connais-tu la version ? (tu peux le savoir depuis la console javascript de ton navigateur en tapant

Code : Tout sélectionner

$().jquery
)
if([email protected]work()){ Nespresso(); } else { what(); }
______________________________

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

31 mars 2016, 19:36

Non, non, pas de souci avec l'appel à la bibliothèque jQuery
que j'appelle juste avant mon script ajaxien.
<script type="text/javascript" src="_js/jquery-2.2.1.min.js" />  <!-- fichier présent dans le répertoire -->
<script type="text/javascript">
$("#in_codeproduit").change(function()
                            { $.post( 'tirelire_ajax_catalogue.php',
                                      { codeproduit:$("#in_codeproduit").val()
                                      },
                                      function()
                                      { $("#in_descriptifFR").html(cat_descriptifFR);
                                        $("#in_descriptifEN").html(cat_descriptifEN);
                                      },
                                      'text'
                                    );
                            });
</script>
J'ai à présent cette erreur :
TypeError: this._recipeManager is null
dans resource://gre/modules/LoginManagerParent.jsm

Ce serait un bug de Mozilla (n°1167872)

Mais avec ce seul message et en l'absence de tout autre symptôme, j'ai du mal à investiguer... :(

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

01 avr. 2016, 02:36

Ne m'en sortant pas, j'ai choisi la méthode "On efface tout et on recommence"
et je suis parti sur la mise au point d'un nouveau script.

tirelire_paiement.php
<form action="tirelire_enregistrement.php" method="post">
    <label  for="in_codeproduit">code produit :</label>
    <input name="in_codeproduit" id="in_codeproduit" type="text" required /><br />
    <label     for="in_descriptifFR">descriptif FR :</label>
    <textarea name="in_descriptifFR" id="in_descriptifFR" required></textarea><br />
    <label     for="in_descriptifEN">descriptif EN :</label>
    <textarea name="in_descriptifEN" id="in_descriptifEN" required></textarea><br />
    <input type="submit"/>
</form>

<script type="text/javascript" src="_js/jquery-2.2.1.min.js" />
<script type="text/javascript">
$(document).ready(function()
                  { var $in_codeproduit  = $('#in_codeproduit');
                    var $in_descriptifFR = $('#in_descriptifFR');
                    var $in_descriptifEN = $('#in_descriptifEN');
                    $in_codeproduit.on('change',
                                       function()
                                       { $in_descriptifFR.empty();
                                         $in_descriptifEN.empty();
                                         var produit = $(this).val();
                                         if (produit!='')
                                            { $.ajax( { type:     'get',
                                                        url:      'tirelire_ajax_catalogue.php',
                                                        data:     'in_codeproduit='+ produit,
                                                        dataType: 'json',
                                                        success:  function(json)
                                                                  { $.each(json, function(value1, value2)
                                                                                 { $in_descriptifFR.html(value1);
                                                                                   $in_descriptifEN.html(value2);
                                                                                 }
                                                                           );
                                                                  }
                                                       } );
                                            }
                                        } );
                 }
</script>
tirelire_ajax_catalogue.php
<?php
require_once('_init.php'); // Connexion à la BD

$req_11 = 'SELECT cat_descriptifFR, cat_descriptifEN
           FROM   cat_catalog
           WHERE  cat_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);
?>
Aucun effet à l'exécution.
Et je n'ai toujours pas de message d'erreur pour me guider... |*() :cry:

ViPHP
ViPHP | 3292 Messages

01 avr. 2016, 14:14

if (produit!='')

rajoute un else alert('toto'); a ce if juste pour voir ... :)
Fait du php depuis que ca existe ou presque :)

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

01 avr. 2016, 14:54

toto n'apparaît pas.

Et toujours ce message sous Firefox :
TypeError: this._recipeManager is null
Et rien sous Chrome.

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

01 avr. 2016, 15:04

Aucune des 4 alertes que j'ai placées ne s'affiche. :(
Se pourrait-il que jQuery ne s’initialise pas ?
<form>
// ...
</form>
<script type="text/javascript" src="_js/jquery-2.2.1.min.js" />
<script type="text/javascript">
$(document).ready(function()
                 { alert('1'); // ALERTE 1
                   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'); // ALERTE 3
                                                      $.ajax( { type:     'get',
                                                                url:      'tirelire_ajax_catalogue.php',
                                                                data:     'in_codeproduit='+ produit,
                                                                dataType: 'json',
                                                                success: function(json)
                                                                         { $.each(json, function(value1, value2)
                                                                                        { $in_descriptifFR.html(value1);
                                                                                          $in_descriptifEN.html(value2);
                                                                                        }
                                                                                  );
                                                                         }
                                                              } 
                                                            );
                                                    }
                                                    else alert('4'); // ALERTE 4
                                                }
                                     );
                 }
</script>

ViPHP
ViPHP | 3292 Messages

01 avr. 2016, 15:08

Essaye de le mettre dans le if alors, s'il apparait essayes de le mettre dans la fonction qui correspond à success, le message d'erreur on s'en fout ça n'a rien à voir c'est dans firefox.
Fait du php depuis que ca existe ou presque :)

ViPHP
ViPHP | 3292 Messages

01 avr. 2016, 15:09

le document ready et jquery devrait être dans head, le javascript ne se met pas dans la body (à part quand il est directement dans le html
Fait du php depuis que ca existe ou presque :)

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

01 avr. 2016, 15:49

le document ready et jquery devrait être dans head,
le javascript ne se met pas dans la body (à part quand il est directement dans le html
Pourtant, il me semblait que l'appel de jQuery devait préférablement se faire en fin du <body>
pour être assuré du chargement complet du DOM, sans quoi cela pourrait bloquer l'affichage de la page.

J'ai probablement mal compris. J'obtempère. ;)

Administrateur PHPfrance
Administrateur PHPfrance | 11443 Messages

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>