IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Ajax avec Jquery/Php sur fonction hover()


Sujet :

AJAX

  1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2018
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2018
    Messages : 25
    Points : 16
    Points
    16
    Par défaut Ajax avec Jquery/Php sur fonction hover()
    Bonjour ,

    Je me permets de laisser un message car j'ai besoin d'aide concernant une requête que je souhaite effectuer .

    J'ai une base de données avec laquelle j’interagis en php .
    Sur une de mes pages je boucle des résultats avec php pour générer des div avec du texte .
    Je souhaite créer un événement qui me permet d'afficher des éléments de la base de données qui correspondent au texte .

    Je donne un exemple plus simple pour mieux comprendre le cheminement :
    Vous générez une liste de villes avec php et en passant votre souris sur une des villes , cela affiche en infobulle ( le pays , le département ) comme ce serait défini dans une base de données .

    Dans mon cas , il s'agit d'attentes qui sont composées de 6 critères de filtres ( je souhaite pas en afficher autant juste 2 principaux )

    Voici mes codes :

    Code html : 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
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    <div class="container">
            <?php
            $reponse = $bdd->query('SELECT * FROM activite ORDER BY activiteNom ASC');
     
            while($donnees = $reponse->fetch())
            {?>
            <div class="card text-center">
              <div class="card-header">
                <?php echo $donnees['activiteNom'];?>
              </div>
              <div class="card-body">
                  <h5 class="card-title"><?php echo $donnees['activiteComment'];?></h5>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente1'],0,150).'<br/>';?></p> 
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente2'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente3'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente4'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente5'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente6'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente7'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente8'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente9'],0,150).'<br/>';?></p>
                  <p class="activiteAttente"><?php echo substr($donnees['activiteAttente10'],0,150).'<br/>';?></p>
                  <?php echo "<a class='btn btn-info' href='modifActivite.php?activiteID=".$donnees['activiteID']."&"."activiteNom=".$donnees['activiteNom']."'> Modifier </a>";?>
                  <?php echo "<a class='btn btn-warning' href='dupliqueractivite.php?activiteID=".$donnees['activiteID']."'> Dupliquer </a>";?>
                  <?php echo "<button type='button' class='btn btn-danger' data-toggle='modal' data-target='#message". $donnees['activiteID']."'> Supprimer</button>";?>
     
                  <div id="message<?php echo $donnees['activiteID'];?>" class="modal fade" role="dialog">
                    <div class="modal-dialog">
     
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title">Suppression</h4>
                    </div>
                    <div class="modal-body">
                      <p>Voulez-vous supprimer cette activité ?</p>
                      <?php echo $donnees['activiteID']. ' - '.$donnees['activiteNom'];?>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
                      <?php echo "<a class='btn btn-danger' href='deleteactivite.php?activiteID=".$donnees['activiteID']."&"."activiteNom=".$donnees['activiteNom']."'> Supprimer </a>";?>
                    </div>
              </div>
            </div>
          </div>
                </div>
                <div class="card-footer text-muted">
                  Cycle : <?php echo $donnees['activiteLevel'];?>
                </div>
                <br/>
              </div>
     
     
     
            <?php
            }
            $reponse->closeCursor();
            ?>

    Le script

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $('.activiteAttente').on(hover, function(){
              var attentes = $(this).val();
              console.log(attentes);
              $.ajax({
                   url:"infoAttentes.php",
                   dataType:"html",
                   method:"GET",
                   data:{attentes:attentes},
                   success:function(data){
                        alert(data);
     
                   }
              });
    Et le 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
    14
    15
    <?php
    include 'bsd.php';
    include 'index.php';
    if (isset($_GET['attentes']))
    {
        $sql = $bdd->query("SELECT * FROM attentes_fondamentales WHERE attentesNom = ?");
        $req = $bdd->prepare($sql);
        $req->execute(array($_GET['attentes']));
        while($donnees = $req->fetch()){
            $detail = $donnees['Section']. ' - ' . $donnees['Cours']. ' - ' . $donnees['matieresID'];
        }
    $req->closeCursor();
    echo $detail;
    }
    ?>

    Dès que je passe sur l'élément , j'ai une alerte console me disant :

    jquery.min.js:2 Uncaught TypeError: Illegal invocation
    at i (VM547 jquery.min.js:2)
    at jt (VM547 jquery.min.js:2)
    at jt (VM547 jquery.min.js:2)
    at jt (VM547 jquery.min.js:2)
    at jt (VM547 jquery.min.js:2)
    at Function.w.param (VM547 jquery.min.js:2)
    at Function.ajax (VM547 jquery.min.js:2)
    at HTMLParagraphElement.<anonymous> (script.js:495)
    at HTMLParagraphElement.handle (VM547 jquery.min.js:2)
    at HTMLParagraphElement.dispatch (VM547 jquery.min.js:2)
    Si quelqu'un peut m'expliquer ce que je dois faire dans ce cas la , ce serait sympa

    Merci d'avance

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    Bonjour,
    déjà lorsque l'on voit
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <p class="activiteAttente"><?php echo substr($donnees['activiteAttente1'],0,150).'<br/>';?></p>
    et que l'on lit plus loin
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $('.activiteAttente').on(hover, function(){
              var attentes = $(this).val();
    Il y a peu de chance que cela fonctionne hover n'étant pas défini, c'est peut être $('.activiteAttente').on("hover", function() que tu voulais écrire.

    De plus il y a de grandes chances que tu n'obtiennes pas ce que tu souhaites, un élément <p> n'ayant pas de value, en plus pourquoi un élément <br> dans un <p> ?

    De plus lorsque l'on écrit data:{attentes:attentes} on cherche quelque part le bâton pour ce faire battre tôt ou tard.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2018
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2018
    Messages : 25
    Points : 16
    Points
    16
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Bonjour,
    déjà lorsque l'on voit
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <p class="activiteAttente"><?php echo substr($donnees['activiteAttente1'],0,150).'<br/>';?></p>
    et que l'on lit plus loin
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    $('.activiteAttente').on(hover, function(){
              var attentes = $(this).val();
    Il y a peu de chance que cela fonctionne hover n'étant pas défini, c'est peut être $('.activiteAttente').on("hover", function() que tu voulais écrire.
    Effectivement , c'est cela que je voulais écrire

    Citation Envoyé par NoSmoking Voir le message
    De plus il y a de grandes chances que tu n'obtiennes pas ce que tu souhaites, un élément <p> n'ayant pas de value, en plus pourquoi un élément <br> dans un <p> ?
    Je voudrais recupérer le texte du paragraphe , dois-je utiliser une autre fonction ?


    Citation Envoyé par NoSmoking Voir le message
    De plus lorsque l'on écrit data:{attentes:attentes} on cherche quelque part le bâton pour ce faire battre tôt ou tard.
    Peux tu m'expliquer ce que tu dis sans condescendance ? En quoi est ce dérangeant de faire cela ? Cela peut poser un problème dans la requête ou c'est un problème de méthodologie de ma part ?

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    « $('.activiteAttente').on("hover", function() » hover n'existe pas en tant qu'événement, tu as le choix, utiliser


    La récupération du contenu d'un élément tel que <p> se fait via la méthode .text().

    Question quand même et compte tenu de l'occupation potentielle du réseau n'aurais tu pas intérêt de gérer cela directement en CSS.

    Concernant le dernier point, ce n'est qu'un avis personnel, les moteurs JavaScript étant capable de déterminer, sans faillir ce qui n'a pas toujours était le cas, ce qui est une propriété de l'objet et ce qui est la valeur de celle ci tu n'as pas trop de soucis à te faire.

    Néanmoins pour des raisons également de lisibilité de code je préfère écrire par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var obj = {
      "array[]": ["un", "deux", "trois"],
      "param": valeurParam,
      "var": "ma variable",
      "class": "ma classe"
    }
    plutôt que
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var obj = {
    //  array[]: ["un", "deux", "trois"],  <- qui reste non valide
      param: param,
      var: "ma variable",
      class: "ma classe"
    }

  5. #5
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    Août 2018
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Août 2018
    Messages : 25
    Points : 16
    Points
    16
    Par défaut
    Merci pour ton post , ca m'a éclairé sur ce que je devais faire

    Effectivement , ta remarque sur ma syntaxe est à prendre en compte et je te remercie de me l'avoir expliqué .

    Je clôture ce post car c'est l’élément qui me manquait pour mon problème !

    Merci de ton aide !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [JQuery]FCK editor en ajax avec Jquery
    Par dembroski dans le forum jQuery
    Réponses: 1
    Dernier message: 10/09/2008, 22h55
  2. [JQuery] Requête ajax avec jQuery
    Par ApheX2 dans le forum jQuery
    Réponses: 3
    Dernier message: 28/08/2008, 22h40
  3. ajax avec jquery
    Par artotal dans le forum jQuery
    Réponses: 14
    Dernier message: 20/07/2008, 22h26
  4. [MySQL] aide pour connection mysql avec du php sur mon site web
    Par cuisto44000 dans le forum PHP & Base de données
    Réponses: 9
    Dernier message: 23/09/2007, 00h30
  5. [AJAX] Temps d'apprentissage d'AJAX avec connaissances PHP/SQL
    Par ayvong dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 29/04/2007, 10h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo