Discussion :

[Rony Rauzduel]

Bonjour ,

J'aurai besoin d'une précision sur la façon de récupérer en Ajax les données envoyées en GET depuis un formulaire.
En effet, je souhaite implémenter une zone de recherche en Ajax avec jQuery récupérant le compte utilisateur présent dans une Base de données.

Voici le code pondu.

Code Javascript :

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
29
30
31
32
33
34
35
36
37
38
39
/** Script permettant la recherche d'un compte utilisateur depuis l'interface d'Admin */
$(document).ready(function() { // $(function()) {} (methode courte)
    //$("#loader-ajax").hide(); 
    // lors du click sur le bouton rechercher du formulaire
    $("#rechercher").submit(function(event) {
        event.preventDefault();
        var recherche = $(".search_box").val(); // la valeur saisie dans la boite de recherche
        var dataString= 'compte_trouve=' + recherche;
 
        if(recherche == "") {} // si la zone de recherche est vide on ne fait rien
        else { // sinon on effectue la requete Ajax sur le serveur
            $.ajax({
                type: "GET", // on fait passer les donnees par l'url
                url: "resultsearch.php", // le traitement cote serveur est effectue depuis ce fichier
                data: dataString, // les donnees a faire passer en GET
                dataType : 'text', 
                cache: false,
                beforeSend: function() {                     
                    $("#loader-ajax").show(); // on affiche le loader d'attente Ajax
                    $(".search_box").val(""); // on vide le champ de recherche
                    $("#recherchecompte").show(); // on affiche la div contenant le texte "Compte utilisateur nom du compte
                    $(".searchword").html(recherche); 
 
                },
                sucess: function(data) {
                    if(data.substr(0, 2)=="ok") {
                        $("#actionAdminForm").hide();
                        $("#loader-ajax").hide();                         
                    }
                    if(data.substr(0, 2)=="ko") {
                        $("#actionAdminForm").hide();
                        $("#loader-ajax").hide();                         
                    }
                }                   
            }); // fin $.ajax()
        } // fin if ... else
    //return false;
    }); // fin $("#rechercher").click(function()
}); // fin $(document).ready(function()

La réponse su serveur suite à la requête Ajax

Code PHP :

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
29
30
<?php
 
require_once 'includes/inc_connexion.php'; // pour se connecter a la Base de donn�es
$conn = opendb_conn(); // on se connecte a la Base de donnees
 
if (isset($_GET['recherche'])) {
    $recherche = $_GET['recherche'];
    $sql = "SELECT pseudo, actif FROM membres WHERE pseudo LIKE '%$recherche%'";
    $stm = $conn->prepare($sql); // on prepare la requete a executer
    $stm->execute(); // on execute la requete
    // PDO::FETCH_ASSOC: retourne un tableau indexe par le nom de la colonne comme retourne dans le jeu de resultats 
    $result = $stm->fetch(PDO::FETCH_ASSOC);
 
    $pseudo = $result['pseudo']; // recuperation du pseudo
    $actif = $result['actif']; // recuperation de la valeur du champ actif
    /*
      echo '<pre>';
      print_r($result);
      echo '</pre>';
     */
    if (isset($pseudo) && $actif==1) { // si le compte existe et est actif alors ...
        echo "ok";
    } else{
        echo "ko";
}
 
}
 
$conn = null;
?>

Code html :

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

1
2
3
4
5
6
<!-- formulaire de recherche d'un compte utilisateur en Ajax -->
<form class="ajax" name="rechercher" action="resultsearch.php" method="GET">
    <label>Rechercher un compte utilisateur</label><em class="spacer"></em>                                
    <input type="text" name="recherche" class="search_box" value="" />
    <input type="submit" id="rechercher" name="submit" value="rechercher"/>
</form><!--fin du formulaire-->

Lorsque je clique sur le bouton rechercher je suis dirigé vers la page resultsearch m'affichant soit ok soit ko, les scripts js de jQuery ne s'effectue pas pour le bloc success.

Merci d'avance.
Transact.

[Bovino]

Apparemment, tu aimes bien te tirer des balles dans le pied...
Donner au bouton submit un id qui correspond au name du formulaire... C'est pas terrible quand on veut passer des nuits paisibles !

Sinon

Code :

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

$("#rechercher").submit(...);

Je te rappelle que c'est un formulaire qui est soumis, pas un input, quand bien même il est de type submit, donc effectivement, ton code n'est pas bon.

[Rony Rauzduel]

J'ai effectuer les modifications suivantes :

Code html :

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

 <form class="ajax" id="rechercherCompte" action="resultsearch.php" method="GET">

Code Javascript :

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

  $("#rechercherCompte").submit(function(event)

Cette fois-ci le loader d'attente Ajax s'affiche (et demeure) mais aucun traitement côté serveur ne s'effectue.

[SpaceFrog]

Que dit la console ?

[Bovino]

Code :

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

sucess: function(data) {...}

[Rony Rauzduel]

La console firebug renvoi ceci
http://localhost/clothesBusiness/res...=1362048360640
... mais réponse est vide, pas l'affichage de ok (car ce compte existe!)

[Invité]

Salut,

J'ai lu un peu vite donc désolé si ma réponse est à côté de la plaque, mais tu fais un traitement server-side dans une condition if (isset($_GET['recherche']));

Or je ne vois pas ou tu envoies de paramètre get recherche dans ta requête.

[Rony Rauzduel]

Dans la requête Ajax ou la requête SQL?

[Invité]

Dans ta requête ajax, je ne vois pas ou tu passe de paramètre get 'recherche'.

Par ailleurs, comme te l'as signalé Bovino, il y un problème avec le nom de ta fonction de succès (success et non sucess). Et je te conseille de rajouter une fonction de callback pour les erreurs.

[Bovino]

C'est à se demander si tu ne le fais pas exprès...

[Rony Rauzduel]

J'ai fait la modification pour sucess en success.
Comment implémenter un callback dans mon cas de figure?

[Invité]

Le truc c'est que j'ai l'impression que côté serveur tu attend un paramètre GET dont la clé est 'recherche'. Or dans ta requête AJAX, tu passes la recherche dans une clé 'compte_trouve' !

[Rony Rauzduel]

Même en modifiant le code de la sorte :

Code Javascript :

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

var dataString= 'recherche=' + recherche;

cela change tout et je récupère la réponse du serveur.