Discussion :

[pascb423]

Bonjour je fait cet 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
$(".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 php :

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

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 :

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

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

[darkstar123456]

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 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
<?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 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
$(".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');
            }
 
 
      }
 
    });
});

[NoSmoking]

Bonjour,
dans ton code :

Code php :

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

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 php :

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

1
2
3
4
echo json_encode(array(
    "status" => 200,
    "statusText" => "Le texte en retour"
  ));

[pascb423]

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

[pascb423]

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 :

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
 $(".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");
});

[darkstar123456]

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 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
$(".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'

[pascb423]

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 :

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
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");
  });
}

[darkstar123456]

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 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
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 javascript :

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

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

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

Code javascript :

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

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

[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

[darkstar123456]

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 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
$(".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)

[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

[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 !!

[pascb423]

très bien, je vous remercie beaucoup

[pascb423]

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

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
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");
  });