Récupération d'un champ de base de donnée mysql

Version imprimable

Bonjour je fait cet ajax:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(".testhover").hover(function(){
 
  $.ajax({    //create an ajax request to display.php
        type: "post",
        url: "ombre.php",  
        //data: {ombre: $('[ombre="ombre"]').text()},           
        //dataType: "json",   //expect html to be returned                
        success: function(data){                    
             console.log("data :",  data);
            alert(data);
            if(data == 'non'){
 
              alert('non');
            }
 
 
      }
 
    });
});

et le fichier ombre.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
session_start();
include 'fonctions.php';
$pseudo = $_SESSION['pseudo'];
$bdd=bdd();
$result=$bdd->query("SELECT * FROM personne WHERE per_pseudo='$pseudo'");
$data1=$result-> fetch();
$data2=$data1['ombre'];
echo $data2;
//$Response = $data2;
 
//echo json_encode($Response);
?>

le champ de la base contient non

la console me renvoie bien non

mais le test dans le ajax

Code:

1
2
3
if(data == 'non'){
alert('non');
}

data contient bien non mais le test ne passe pas il n'y a pas l'alert?

merci si vous y voyez une erreur

Bonjour,

C'est pas très lisible comme code donc pas facile d'aider

Je conseillerais cependant de faire une réponse en JSON, d'autant que (comme c'est écrit en commentaire dans le code d'ailleurs) le datatype par défaut d'une réponse AJAX de jQuery est du JSON
Cela peut donc influer le test de la condition

De plus, pour être certain de l'index qu'on va tester, on va lui donner un nom manuellement comme pour une variable.

Ci-dessous, un code qui permet d'output une réponse JSON assez proprement en PHP suivi de la modification du code de base

Code:

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
<?php
/**
 * Output JSON response encoded with headers
 * 
 * @param json $response
 */
function json_response($response = null) {
    // End AJAX return if no data.
    if ($response == null)
        exit;
    // Proper headers for json output.
    header('Content-Type: application/json');
    // Output our response.
    echo json_encode($response);
    exit;
}
 
session_start();
include 'fonctions.php';
$response = ['success' => false];
$pseudo = $_SESSION['pseudo'];
$bdd = bdd();
$result = $bdd->query("SELECT * FROM personne WHERE per_pseudo='$pseudo'");
$row = $result->fetch();
if (!empty($row)) {
    $response['success'] = true;
    $response['personne'] = $row;
}
json_response($response);

il suffit alors de tester la réponse dans le retour AJAX :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(".testhover").hover(function(){
 
  $.ajax({    //create an ajax request to display.php
        type: "post",
        url: "ombre.php",  
        //data: {ombre: $('[ombre="ombre"]').text()},           
        //dataType: "json",   //expect html to be returned                
        success: function(data){                    
             console.log("data :",  data);
            if(data.success && data.personne.ombre == 'non'){
 
              alert('non');
            }
 
 
      }
 
    });
});

12/08/2021, 10h57
NoSmoking
Bonjour,
dans ton code :
Code:

1 2 3 4 5 echo $data2; //$Response = $data2; // <- ici il y a un blanc en début de ligne //echo json_encode($Response); ?>
il existe un blanc qui est également envoyé.

Tu peux donc supprimer tous les espaces « parasites » côté serveur ou tester en appliquant un trim(data) sur la donnée reçu ou encore tester la présence du non dans la chaîne avec indexOf() ...

Le renvoie d'un JSON, comme dit par darkstar123456 reste quand même une excellente solution, autre exemple :
Code:

1 2 3 4 echo json_encode(array( "status" => 200, "statusText" => "Le texte en retour" ));
12/08/2021, 11h20
pascb423

un grand merci pour vos solutions, problème résolut

ce problème est résolu mais je dois faire quelque chose en fonction de la réponse qui est juste maintenant mais ça ne marche pas, voici le nouveau script:

Code:

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
 $(".testhover").hover(function(){
 
  $.ajax({    //create an ajax request to display.php
        type: "post",
        url: "ombre.php",  
        //data: {ombre: $('[ombre="ombre"]').text()},           
        //dataType: "json",   //expect html to be returned                
        success: function(data){                    
             console.log(data);
            //alert(data);
            if(data.success && data.personne.ombre == 'oui'){
              var ombre='oui';
 
            }else{
              var ombre='non';
            }
 
 
      }
 
    });
  if(ombre=='oui'){
    var divShadow = $(this).find('.card');
    divShadow.css("box-shadow", "0 0 30px #000000");
 
    var divShadow = $(this).find('.card-footer');
    divShadow.css("height", "65px");
    divShadow.css("font-weight" , "bolder");
    divShadow.css("font-size" , "20px");
});

Vous ne pouvez pas exécuter du code en dehors de la fonction $.ajax() de cette façon

AJAX signifie : Asynchronous JavaScript and XML

Cela veut dire que le code est asynchrone. Or vous avez écrit du code "synchrone" (l'un en dessous de l'autre)

Pour que le code soit exécuté en fonction de la réponse AJAX, il doit être dans la réponse AJAX (soit du code directement, soit appeler une fonction à partir de cet endroit)
Code:

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 $(".testhover").hover(function () { // On va créer cette variable car $(this) ne représentra pas notre .testhover dans la réponse AJAX var $this = $(this); $.ajax({//create an ajax request to display.php type: "post", url: "ombre.php", //data: {ombre: $('[ombre="ombre"]').text()}, //dataType: "json", //expect html to be returned success: function (data) { console.log(data); //alert(data); if (data.success && data.personne.ombre == 'oui') { // J'ai simplifié l'écriture car on peut passer un objet à la méthode css() de jQuery // Cependant, généralement, on va plutôt écrire du CSS à part dans un fichier CSS et ajouter/supprimer des classes (addClass() & removeClass()) // C'est beaucoup plus souple de travailler de la sorte $this.find('.card').css("box-shadow", "0 0 30px #000000"); $this.find('.card-footer').css({ "height": "65px", "font-weight": "bolder", "font-size": "20px", }); } } }); });
Actuellement, le code que vous avez écrit (if(ombre=='oui'){ // etc..) est exécuté avant même la réponse AJAX car JavaScript n'attend pas qu'une instruction ait complètement été terminée pour passer à la suite (sauf si on lui demande spécifiquement)
De plus, si vous regardez la console du navigateur, vous y verrez probablement une erreur car à ce stage, var ombre n'existe pas, il doit donc y avoir une erreur de type undefined variable 'ombre'

oui, effectivement je n'y avais plus pensé, merci beaucoup,
du coup j'ai envoyé vers une fonction, ca marche mais pas la première fois, la première fois quand je suis sur l'image, il n'y a pas l'ombre portée, il faut que je ressorte avec la souris et revenir dessus pour qu'il y aille l'ombre, il y a peut etre encore des faute dans le nouveau code?

Code:

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
40
41
42
43
44
45
46
47
48
 $(".testhover").hover(function(){
 
  $.ajax({    //create an ajax request to display.php
        type: "post",
        url: "ombre.php",
        //async: true,  
        //data: {ombre: $('[ombre="ombre"]').text()},           
        //dataType: "json",   //expect html to be returned                
        success: function(data){                    
             console.log(data);
            //alert(data);
            if(data.success && data.personne.ombre == 'oui'){
              //alert(data);
              ombre();
 
            }
 
 
      }
 
    });
  });
 
 
function ombre(){
   $(".testhover").hover(function(){
    var divShadow = $(this).find('.card');
    divShadow.css("box-shadow", "0 0 30px #000000");
 
    var divShadow = $(this).find('.card-footer');
    divShadow.css("height", "65px");
    divShadow.css("font-weight" , "bolder");
    divShadow.css("font-size" , "20px");
 
    }, function(){
    var divShadow = $(this).find('.card');
    divShadow.css("box-shadow", "0 0 20px #BBB7B7");
    //divShadow.css("margin-top", "0px");
    //divShadow.css("height", "570px");
    //divShadow.css("width", "350px");
    //divShadow.css("margin-left", "0px");
    //divShadow.css("margin-right", "0px");
    var divShadow= $(this).find('.card-footer');
    divShadow.css("height", "50px");
    divShadow.css("font-weight" , "normal");
    divShadow.css("font-size" , "16px");
  });
}

Oui, ce code que vous utilisez ne correspond pas du tout à ce que j'ai écrit.

Vous refaites un hover in/out dans votre fonction ombre() ...

Je ne sais pas ce que vous voulez faire donc je sais pas trop comment le corriger mais j'imagine quelque chose comme ça :
J'imagine que en fonction de la réponse, vous voulez faire un affichage ou un autre
On va donc appeler la fonction ombre() quoi qu'il arrive mais en lui ajoutant un paramètre booléen (true ou false)

Code:

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
40
41
42
43
// En Javascript, il faut normalement définir les fonctions AVANT de les appeler même si ça fonctionne quand même ^^
function ombre(is_ombre) {
    if (is_ombre) {
        var divShadow = $(this).find('.card');
        divShadow.css("box-shadow", "0 0 30px #000000");
 
        var divShadow = $(this).find('.card-footer');
        divShadow.css("height", "65px");
        divShadow.css("font-weight", "bolder");
        divShadow.css("font-size", "20px");
 
    } else {
        var divShadow = $(this).find('.card');
        divShadow.css("box-shadow", "0 0 20px #BBB7B7");
        //divShadow.css("margin-top", "0px");
        //divShadow.css("height", "570px");
        //divShadow.css("width", "350px");
        //divShadow.css("margin-left", "0px");
        //divShadow.css("margin-right", "0px");
        var divShadow = $(this).find('.card-footer');
        divShadow.css("height", "50px");
        divShadow.css("font-weight", "normal");
        divShadow.css("font-size", "16px");
    }
}
 
$(".testhover").hover(function () {
    $.ajax({//create an ajax request to display.php
        type: "post",
        url: "ombre.php",
        //async: true,  
        //data: {ombre: $('[ombre="ombre"]').text()},           
        //dataType: "json",   //expect html to be returned                
        success: function (data) {
            console.log(data);
            //alert(data);
            if (data.success) {
                // Ceci va passer un paramètre true ou false à la fonction
                ombre((data.personne.ombre == 'oui'));
            }
        }
    });
});

Je vais expliquer la ligne ombre((data.personne.ombre == 'oui')); qui peut être difficile à comprendre pour un débutant
C'est une façon rapide d'écrire ceci :

Code:

1
2
var is_ombre = (data.personne.ombre == 'oui');
ombre(is_ombre);

Qui est lui-même la même chose que :

Code:

1
2
3
4
5
var is_ombre = false;
if (data.personne.ombre == 'oui') {
    is_ombre = true;
}
ombre(is_ombre);

12/08/2021, 13h55
pascb423

en fait, si la réponse est oui, le champ de la base de donnée, au passage de la souris sur une image il y a un effet d'ombre.

l'ancien code fonctionne seulement la deuxième fois du passage sur l'image avec la souris après rafraichissement?

merci pour le nouveau code mais du coup il n'y a plus du tout d'ombre sur l'image?

merci pour votre code et de passer du temps à résoudre cette solution

Effectivement, vous ne prenez que des parties de code et donc il y a encore la moitié qui était incorrecte quand je suis parti de votre dernier copier/coller
Code:

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 $(".testhover").hover(function () { var $this = $(this); $.ajax({//create an ajax request to display.php type: "post", url: "ombre.php", //async: true, //data: {ombre: $('[ombre="ombre"]').text()}, //dataType: "json", //expect html to be returned success: function (data) { console.log(data); //alert(data); if (data.success) { if ((data.personne.ombre == 'oui')) { var divShadow = $this.find('.card'); divShadow.css("box-shadow", "0 0 30px #000000"); var divShadow = $this.find('.card-footer'); divShadow.css("height", "65px"); divShadow.css("font-weight", "bolder"); divShadow.css("font-size", "20px"); } else { var divShadow = $this.find('.card'); divShadow.css("box-shadow", "0 0 20px #BBB7B7"); //divShadow.css("margin-top", "0px"); //divShadow.css("height", "570px"); //divShadow.css("width", "350px"); //divShadow.css("margin-left", "0px"); //divShadow.css("margin-right", "0px"); var divShadow = $this.find('.card-footer'); divShadow.css("height", "50px"); divShadow.css("font-weight", "normal"); divShadow.css("font-size", "16px"); } } } }); });
Comme je le disais il y 2 messages :
1] il faut créer une variable pour se "souvenir" du bouton (var $this = $(this) ligne 2), car une fois dans la réponse $.ajax() le $(this) sera la représentation la méthode ajax et non le hover.
2] j'ai retiré la fonction parce que je pense que ça sera plus simple pour comprendre (d'autant plus qu'elle n'est pas absolument nécessaire car elle n'est appelée qu'une seule fois)
3] j'ai remplacé tous les $(this) par $this dans la réponse de l'AJAX

Je pense sincèrement que vous devriez coupler le code à du CSS
Ca serait beaucoup plus propre et plus lisible

A propos, je ne connais pas le projet dans son entièreté mais de ce que je vois, vous pouvez réaliser l'effet souhaité sans la moindre ligne de javascript.
Pour peu que vous travailliez en PHP, si vous bouclez sur le résultat d'une requête SQL et que vous avez l'info ombre, il suffit d'afficher telle ou telle classse en fonction de sa valeur.

Tant qu'on y est, avoir plein de fois la même déclaration de variable est très mauvais (var divShadow)

12/08/2021, 14h23
pascb423

ça marche presque, je n'ai pas bien expliqué:
quand la souris est sur l'image et que la réponse est oui, il doit y avoir l'ombre, ça, ça marche, mais quand la souris sort de l'image, l'ombre doit disparaitre, en fait ce qu'il y a dans le else
12/08/2021, 14h29
darkstar123456

Je ne comprends toujours pas pourquoi faire ça en javascript...

Toujours est-il qu'il ne s'agit plus d'un problème d'AJAX à présent mais d'utiliser la 2e partie de la méthode hover()

Je ne vais pas tout écrire à votre place car vous n'apprendrez rien... donc je vous laisse essayer d'abord

EDIT : Je vous ai mis le lien vers la documentation de hover(), et je vous invite énormément méga fortement à remplacer toute la CSS en javascript par du vrai CSS, et donc utiliser des classes; ça va tout simplifier !!
12/08/2021, 14h31
pascb423

très bien, je vous remercie beaucoup

si ca peut aider d'autres, voici le script qui fonctionne très bien et merci aux intervenants

Code:

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
$(".testhover").hover(function () {
    var $this = $(this);
    $.ajax({//create an ajax request to display.php
        type: "post",
        url: "ombre.php",
        //async: true,  
        //data: {ombre: $('[ombre="ombre"]').text()},           
        //dataType: "json",   //expect html to be returned                
        success: function (data) {
            console.log(data);
            //alert(data);
            if (data.success) {
                if ((data.personne.ombre == 'oui')) {
                    var divShadow = $this.find('.card');
                    divShadow.css("box-shadow", "0 0 30px #000000");
 
                    var divShadow = $this.find('.card-footer');
                    divShadow.css("height", "65px");
                    divShadow.css("font-weight", "bolder");
                    divShadow.css("font-size", "20px");
 
                } 
            }
        }
    });
}, function(){
    var divShadow = $(this).find('.card');
    divShadow.css("box-shadow", "0 0 20px #BBB7B7");
    //divShadow.css("margin-top", "0px");
    //divShadow.css("height", "570px");
    //divShadow.css("width", "350px");
    //divShadow.css("margin-left", "0px");
    //divShadow.css("margin-right", "0px");
    var divShadow= $(this).find('.card-footer');
    divShadow.css("height", "50px");
    divShadow.css("font-weight" , "normal");
    divShadow.css("font-size" , "16px");
  });