Forum d'entraide PHPFrance

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);
?>

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.

Hello albat, peux-tu bannir de ton vocabulaire l'expression "ça ne marche pas" stp 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

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.

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...

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.

@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 )

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...

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...

if (produit!='')

rajoute un else alert('toto'); a ce if juste pour voir ...

toto n'apparaît pas.

Et toujours ce message sous Firefox :

TypeError: this._recipeManager is null

Et rien sous Chrome.

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>

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.

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

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.

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>