Discussion :

[caius2]

Bonjour,

je n'arrive pas à afficher la liste de proposition lorsqu'on commence à écrire dans la zone de saisie.
Mon script ajax fonctionne et retourne bien les infos (json), ma fonction jquery autocomplete récupère bien les infos qu'il faut pour les transmettre à l'ajax mais impossible d'en afficher le résultat.
je ne sais pas ce qui cloche...

code ajax :

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
21
22
 
function ajax_composante($term, $connection)
{
 
    $sql = "select cod_cmp, lib_cmp, lic_cmp  from composante where tem_en_sve_cmp='O' and cod_cmp LIKE '%".$term. "%' ";
    $stid = oci_parse($connection, $sql);
    $res = oci_execute($stid);
 
    $arrayCode = array();
 
    while (($row = oci_fetch_assoc($stid)) != false) {
        $arrayCode[$row['COD_CMP']] = $row['LIB_CMP'];
    }
 
   /* while(oci_fetch($stid)){
        array_push($arrayCode, oci_result($stid,1 ).' - '. oci_result($stid,2 ));
    }*/
 
    var_dump($arrayCode);
 
    echo json_encode($arrayCode);
}

code javascript :

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
21
22
23
24
25
 
$('input#crit-valeur').autocomplete({
        source: function (requete, reponse) { // les deux arguments représentent les données nécessaires au plugin
            $.ajax({
                url: 'ajax_droit_acces.php', // on appelle le script JSON
                type: 'POST',
                dataType: 'json', // on spécifie bien que le type de données est en JSON
                data: {
                    name_startsWith: $('input#crit-valeur.saisie').val(), // on donne la chaine de caractère tapée dans le champ de recherche
                    maxRows: 15,
                    'crit-colonne': $('#crit-colonne').val()
                },
                success: function (donnee) {
                    resp($.map(donnee, function (objet) {
                        if (objet === "Pas de r\351sultat") {
                            return "Pas de R\351sultat ...";
                        } else {
                            return objet; // on retourne cette forme de suggestion
                        }
 
                    }));
                }
            });
        }
    });

s'il vous plait, dites-moi ce qui ne va pas ou bien ce que j'ai oublié....

Merci d'avance

[Watilin]

Bonsoir,
si tu dis que ton script serveur renvoie les bonnes données, je te crois sur parole. Attention cependant à la clause LIKE, tu as peut-être une vulnérabilité si $term est la chaîne vide. Je ne connais pas suffisamment bien le pilote Oracle, mais j’ai trouvé une fonction bind dans la doc et je suppose qu’elle fonctionne comme avec PDO. Je te conseille de l’utiliser.

Dans ton script client, il y a une variable qui soit est indéfinie, soit est définie dans une partie du code que tu ne montres pas. Il s’agit de resp dans cette ligne :

Code :

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

resp($.map(donnee, function (objet) {

Je te suggère, si tu ne l’as pas déjà fait, d’ouvrir la console JS avec la touche F12, de voir si tu n’as pas de message d’erreur, et de revenir ici nous donner plus d’informations

[caius2]

Bonjour Watilin et merci pour ta réponse,

alors en fait le 'resp', c'est une erreur de ma part, j'ai oublié de le modifier avant de le poster. Il fait lire à la place 'reponse' et fait référence à ' source: function (requete, reponse) '
de mon script js.

Ensuite, je n'ai aucune erreur qui apparaît dans la console... ou alors je ne sais pas m'y prendre avec ça lol

Je pense qu'il s'agit au départ de mon script ajax, de ma construction de tableau.. cela me retourne ceci comme réponse :

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
21
22
23
24
25
 
string(98) "select cod_cmp, lib_cmp, lic_cmp  from composante where tem_en_sve_cmp='O' and cod_cmp LIKE '%U%' "
array(12) {
  ["IUG"]=>
  string(23) "IUT (GAP)"
  ["IUL"]=>
  string(29) "IUT (La Ciotat)"
  ["IUM"]=>
  string(36) "IUT "
  ["UNI"]=>
  string(10) "Universite"
  ["UTA"]=>
  string(29) "Universite du Temps"
  ["UTL"]=>
  string(35) "Universite du Temps Libre "
  ["JOU"]=>
  string(40) "Ecole de Journalisme"
  ["OSU"]=>
  string(19) "OSU"
  ["U0X"]=>
  string(40) "Serv univ activites physiques et sportiv"
  ["IUX"]=>
  string(38) "IUT Delocalisations hors etablissement"
}
{"IUG":"IUT (GAP)","IUL":"IUT (La Ciotat)","IUM":"IUT (Marseille Luminy)","IUT":"IUT","UNI":"Universite","UTA":"Universite du Temps","UTL":"Universite du Temps Libre","JOU":"Ecole de Journalisme ","OSU":"OSU","U0X":"Serv univ activites physiques et sportiv","IUX":"IUT Delocalisations hors etablissement"}

est-ce bon ou devrais-je avoir des clé identiques ?

[mathieu]

dans la partie "success", ce n'est pas la fonction "resp", elle n'existe pas, mais "reponse(..."

[caius2]

alors j'ai fait la correction de 'resp' et 'reponse' puis j'ai ajouté de quoi attraper les erreurs dans mon js :

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
21
22
23
24
25
26
27
28
 
$('input#crit-valeur').autocomplete({
        source: function(req, resp) { // les deux arguments représentent les données nécessaires au plugin
            $.ajax({
                url: 'ajax_droit_acces.php', // on appelle le script JSON
                type: 'POST',
                dataType: 'json', // on spécifie bien que le type de données est en JSON
                data: {
                    name_startsWith: $('input#crit-valeur.saisie').val(), // on donne la chaine de caractère tapée dans le champ de recherche
                    maxRows: 15,
                    'crit-colonne': $('#crit-colonne').val()
                },
                success: function( data ) {
                    alert("hello");
                },
                error: function (xhr, textStatus, errorThrown){
                    alert("error: " + errorThrown);
                },
                success: function(donnee) {
                    resp($.map(donnee, function (objet) {
                            return objet; // on retourne cette forme de suggestion
                    }));
                }
 
            });
        }
 
    });

et cela me retourne :

error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

voilà j'avance un peu...

j'ai également modifié la construction de mon tableau de données :

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
 
function ajax_composante($term, $connection)
{
 
    $sql = "select cod_cmp, lib_cmp, lic_cmp  from composante where tem_en_sve_cmp='O' and cod_cmp LIKE '%".$term. "%' ";
    $stid = oci_parse($connection, $sql);
    $res = oci_execute($stid);
 
    var_dump($sql);
 
    $i = 0;
    while (($row = oci_fetch_assoc($stid)) != false) {
       $arrayCode[$i] = [ 'code' =>  $row['COD_CMP'] .' - '. $row['LIB_CMP'] ];
       $i++;
    }
 
    echo json_encode($arrayCode);
}

quel est le problème avec le json puisque je lui fourni bien un tableau ?

[Watilin]

C’est les var_dump qui interfèrent. Retire-les et ça devrait aller. Tu peux examiner le contenu reçu côté client dans l’onglet réseau de la console.

Il y a une chose que tu peux rajouter dans ton code PHP, ce n’est pas obligatoire mais ça peut rendre ton intention plus claire : un en-tête Content-Type avec la fonction header. Par défaut, PHP envoie le Content-Type text/html, ce qui n’est pas cohérent avec JSON. Heureusement, jQuery sait gérer ce genre de cas, mais ça sera plus « propre » avec le Content-Type application/json.

Code php :

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

1
2
<?php
header('Content-Type: application/json');

Le header doit être placé au début du script, donc si ça te pose problème, ne te sens pas obligée de le faire.

Oh, il y a aussi un truc qui me dérange personnellement, un mauvais choix de conception de jQuery :

Code :

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

type: 'POST',

Le caractère POST ou GET (ou PUT, etc.), on appelle ça la méthode, pas le type. jQuery a corrigé ça depuis quelques versions et désormais tu peux écrire :

Code :

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

method: 'POST'

On est d’accord, ça ne change absolument rien au fonctionnement du script, mais ça supprime une ambigüité pour les humains.

Quant à la variable $i, normalement tu n’en as pas besoin. PHP gère tout seul les index de tableaux si tu écris comme ceci :

Code PHP :

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

$arrayCode[] = [ 'code' =>  $row['COD_CMP'] .' - '. $row['LIB_CMP'] ];

[caius2]

ho Merci merci merci Watilin !!!
ça fonctionne !!! tu es un génie et surtout très pédagogue !
J'ai suivi toutes tes recommandations également.

Merci beaucoup !