Dectecter un click sur un boutton avec une pagination

Par Layp, il y a 8 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche a rendre mon site plus dynamique avec un syteme de like sans rechargement de page mais avec une utilisation de pagination, Jquery ne dectecte pas de click

$('button').click(function(){ var id = $(this).attr('id'); var i = $(this).children('i'); var button = $(this); var text = $(this).text(); console.log(id); $.ajax({ type: "POST", url: "???.php", data: "id_tuto="+id, success: function(){ i.toggleClass("fa-heart-o"); i.toggleClass("fa-heart"); console.log('succes'); if(text == " Aimer ce tuto"){ button.html("<i class='fa fa-heart-o'></i> Ne plus aimer ce tuto"); }else{ button.html("<i class='fa fa-heart'></i> Aimer ce tuto"); } }, error: function(error){ console.log('erreur'); console.error(error); } }); }); <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><?= $tuto['nom'] ?></h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <img src="" style="width:160px;height:160px;"> </div> <div class="col-md1-9"> <p><i class="fa fa-user"></i> <?= $tuteur['pseudo'] ?> <i class="fa fa-clock-o"></i> <?= $date ?> <?php if($tuto['difficulty'] >= 1){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 2){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 3){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 4){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 5){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if(!empty($tuto['video_link'])){?> <i class="fa fa-video-camera"></i> <?php } ?> <i class="fa fa-download"></i></p> <p><?= $tuto['description'] ?></p> <a class="btn btn-info" href="/devinput/tuto/see/<?= $tuto['id'] ?>"><i class="fa fa-eye"></i> Voir ce tuto</a> <?php if(!empty($user['pseudo'])){ $reqLike = $bdd->prepare("SELECT * FROM like_tuto WHERE id_user = ? AND id_tuto = ?"); $reqLike->execute([$_SESSION['id'],$tuto['id']]); $nbLike = $reqLike->rowCount(); if($nbLike == 0) { ?> <button class="btn btn-danger" id="<?= $tuto['id'] ?>"><i class="fa fa-heart"></i> Aimer ce tuto</button> <?php }else{ ?> <button class="btn btn-danger" id="<?= $tuto['id'] ?>"><i class="fa fa-heart-o"></i> Ne plus aimer ce tuto</button> <?php } } ?> </div> </div> </div> </div> </div>

Ce que je veux

Je voudrais que les tutos soit aimé sans rechargement de page avec un systeme de pagination

Ce que j'obtiens

Jquery ne detecte pas les clics des div chargé non affiché au début de la page mais affiché avec la pagination !

10 réponses

Layp, il y a 8 ans

Kenor, j'ai testé ton code mais sa ne marche toujours pas je vais aller me renseigner

Kenor, il y a 8 ans

Essai de nous mettre ton code "même non fonctionnel" sur jsfiddle.net à la limite.

Tu parles de pagination, je suppose que cette dernière est en Ajax (d'ou ma solution).

Sinon, évite les actions sur un simple selector tel que "button", essai de le mettre sur une classe plus spécifique.

Kenor, il y a 8 ans

$('button').click(function(){
a remplacer par
$(document).on('click', 'button', function(){

Je n'ai pas lu tout ton code, mais il y a une bonne probabilité pour que ton soucis vienne de là.

(renseigne toi sur la fonction "live" de jQuery (deprécié, mais c'est pour l'idée)).

En gros, tu créé un évenement sur le clic sur un bouton qui n'existe pas encore (car chargé via Ajax), donc le clic ne marche pas.
Tu as plusieurs possibilités, dont celle proposé.

Mehdikacim, il y a 8 ans

Kenor est tombé sur le pile, c'est à mon avis exactement le problème.
Je l'ai déjà vécu ^^

Layp, il y a 8 ans

Non ma pagination est faite en php, mon pere m'a dit qu'il faudrait peut etre rajouter un truc sur une div pour pouvoir dire a jquery que les events marche sur elle. Apres je ne sais pas

Kenor, il y a 8 ans

Donc en effet, ma solution ne convient pas, mais le fait de préciser qu'il y a une pagination n'apporte rien au sujet si cette dernière est faites en PHP.

Il serait préférable d'ajouter une classe tel que<button class="btn btn-danger" devient <button class="btn btn-danger mon-action-js"

puis d'utiliser $('.mon-action-js') comme selector

Qu'affiche ta console sinon ? Tel quel, je ne vois pas de soucis bloquant avec le code que tu nous montres.

Layp, il y a 8 ans

Voici tout les codes :
Le js :

$(document).ready(function(){ $('.like').on('click', 'button', function(){ var id = $(this).attr('id'); var i = $(this).children('i'); var button = $(this); var text = $(this).text(); console.log(id); $.ajax({ type: "POST", url: "/devinput/api/like_tuto.php", data: "id_tuto="+id, success: function(){ i.toggleClass("fa-heart-o"); i.toggleClass("fa-heart"); console.log('succes'); if(text == " Aimer ce tuto"){ button.html("<i class='fa fa-heart-o'></i> Ne plus aimer ce tuto"); }else{ button.html("<i class='fa fa-heart'></i> Aimer ce tuto"); } }, error: function(error){ console.log('erreur'); console.error(error); } }); }); function like_tuto(id){ var i = $(this).children('i'); var button = $(this); var text = $(this).text(); $.ajax({ type: "POST", url: "/devinput/api/like_tuto.php", data: "id_tuto="+id, success: function(){ i.toggleClass("fa-heart-o"); i.toggleClass("fa-heart"); console.log('succes'); if(text == " Aimer ce tuto"){ button.html("<i class='fa fa-heart-o'></i> Ne plus aimer ce tuto"); }else{ button.html("<i class='fa fa-heart'></i> Aimer ce tuto"); } }, error: function(error){ console.log('erreur'); console.error(error); } }) } });

le fichier php :

<?php session_start(); include 'include/bdd.inc.php'; if(isset($_GET['cat']) AND !empty($_GET['cat'])){ $cat = $_GET['cat']; }else{ $cat = 0; } if(!empty($_SESSION['id'])){ $requser = $bdd->prepare('SELECT * FROM users WHERE id = ?'); $requser->execute([$_SESSION['id']]); $user = $requser->fetch(); } if($cat >= 1){ $TutosPerPage = 10; $tutostotalesreq = $bdd->prepare('SELECT id FROM tuto WHERE cat LIKE "%'.$cat.'%"'); $tutostotalesreq->execute(); $tutostotales = $tutostotalesreq->rowCount(); $pagesTotales = ceil($tutostotales/$TutosPerPage); if(isset($_GET['page']) AND !empty($_GET['page']) AND $_GET['page'] > 0 AND $_GET['page'] <= $pagesTotales) { $_GET['page'] = intval($_GET['page']); $pageCourante = $_GET['page']; } else { $pageCourante = 1; } $depart = ($pageCourante-1)*$TutosPerPage; $reqtuto = $bdd->prepare('SELECT * FROM tuto WHERE cat LIKE "%'.$cat.'%" ORDER BY id DESC LIMIT '.$depart.','.$TutosPerPage); $reqtuto->execute(); }else{ $TutosPerPage = 10; $tutostotalesreq = $bdd->prepare('SELECT id FROM tuto'); $tutostotalesreq->execute(); $tutostotales = $tutostotalesreq->rowCount(); $pagesTotales = ceil($tutostotales/$TutosPerPage); if(isset($_GET['page']) AND !empty($_GET['page']) AND $_GET['page'] > 0 AND $_GET['page'] <= $pagesTotales) { $_GET['page'] = intval($_GET['page']); $pageCourante = $_GET['page']; } else { $pageCourante = 1; } $depart = ($pageCourante-1)*$TutosPerPage; $reqtuto = $bdd->prepare('SELECT * FROM tuto ORDER BY id DESC LIMIT '.$depart.','.$TutosPerPage); $reqtuto->execute(); } $tutos = $reqtuto->fetchAll(); ?> <!DOCTYPE html> <html> <head> <title>DevInput - Liste des tutos</title> <?php include 'include/head.inc.php'; ?> </head> <body> <?php include 'include/nav.inc.php'; ?> <div class="container"> <?php include 'views/tutos.view.php'; ?> </div> <?php include 'include/footer.inc.php'; ?> </body> </html>

La view :

<h1>Liste des tutos :</h1> <?php if(empty($_SESSION['id'])){?> <div class="alert alert-dismissible alert-danger"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>Attention !</strong> Il faut etre connecté pour aimer les tutos ou voir les codes sources. <a class="alert-link" href="/devinput/login">S'inscrire/Se connecter</a> </div> <?php } ?> <div class="row"> <div class="col-md-8"> <div id="tutos"> <?php foreach($tutos as $tuto){ ?> <div class="tuto"> <?php $req = $bdd->prepare("SELECT * FROM users WHERE id = ?"); $req->execute([$tuto['id_tuteur']]); $tuteur = $req->fetch(); if(!empty($user['lg'])){ setlocale(LC_TIME, $user['lg']); }else{ setlocale(LC_TIME, "FR"); } $date = ucfirst(strftime("%d %B %Y à %H:%M",strtotime($tuto['date']))); ?> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title"><?= $tuto['nom'] ?></h3> </div> <div class="panel-body"> <div class="row"> <div class="col-md-3"> <img src="" style="width:160px;height:160px;"> </div> <div class="col-md1-9"> <p><i class="fa fa-user"></i> <?= $tuteur['pseudo'] ?> <i class="fa fa-clock-o"></i> <?= $date ?> <?php if($tuto['difficulty'] >= 1){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 2){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 3){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 4){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if($tuto['difficulty'] >= 5){?><i class="fa fa-star warning"></i> <?php }else{ ?><i class="fa fa-star-o warning"></i> <?php } ?> <?php if(!empty($tuto['video_link'])){?> <i class="fa fa-video-camera"></i> <?php } ?> <i class="fa fa-download"></i></p> <p><?= $tuto['description'] ?></p> <a class="btn btn-info" href="/devinput/tuto/see/<?= $tuto['id'] ?>"><i class="fa fa-eye"></i> Voir ce tuto</a> <?php if(!empty($user['pseudo'])){ $reqLike = $bdd->prepare("SELECT * FROM like_tuto WHERE id_user = ? AND id_tuto = ?"); $reqLike->execute([$_SESSION['id'],$tuto['id']]); $nbLike = $reqLike->rowCount(); if($nbLike == 0) { ?> <button class="btn btn-danger like" id="<?= $tuto['id'] ?>"><i class="fa fa-heart"></i> Aimer ce tuto</button> <?php }else{ ?> <button class="btn btn-danger like" id="<?= $tuto['id'] ?>"><i class="fa fa-heart-o"></i> Ne plus aimer ce tuto</button> <?php } } ?> </div> </div> </div> </div> </div> <?php } ?> </div> <ul class="pagination" id="pagination"> <?php for($i=1;$i<=$pagesTotales;$i++) { if($i == $pageCourante) { echo '<li class="disabled"><a href="?page='.$i.'" >'.$i.'</a><li>'; }elseif($i == $pageCourante+1){ echo '<li><a href="?page='.$i.'" class="next">'.$i.'</a><li>'; } else { echo '<li><a href="?page='.$i.'">'.$i.'</a><li>'; } } ?> </ul> </div> <div class="col-md-1"></div> <div class="col-md-3 well"> <div class="list-group"> <a href="?cat=1" class="list-group-item <?php if($cat == 1){echo 'active'; }?>">Php</a> <a href="?cat=2" class="list-group-item <?php if($cat == 2){echo 'active'; }?>">Html</a> <a href="?cat=3" class="list-group-item <?php if($cat == 3){echo 'active'; }?>">Js</a> <a href="?cat=4" class="list-group-item <?php if($cat == 4){echo 'active'; }?>">Jquery</a> </div> </div> </div> <script type="text/javascript" src="/devinput/js/tuto.js"></script> <script> $(document).ready(function() { var ias = jQuery.ias({ container: '#tutos', item: '.tuto', pagination: '#pagination', next: '.next' }); ias.extension(new IASSpinnerExtension({ src: '/devinput/loader/ajax-loader.gif' })); ias.extension(new IASTriggerExtension({ text: 'Charger plus de tutos', html: '<div class="div-loader"><span class="btn btn-primary btn-loader">{text}</span></div>', offset: 2 })); ias.extension(new IASNoneLeftExtension({ text: 'Plus de contenu à charger...', html: '<div class="div-loader" align="center"><span class="btn btn-default disabled btn-loader">{text}</span></div>' })); }); </script>

La console ne m'affiche rien.

Layp, il y a 8 ans

Et merci de l'aide que tu m'apportes

TokaLazy, il y a 8 ans

Hello

Je n'ai pas regardé le code en totalité mais dans ton js

$('.like').on('click', 'button', function(){ ... });

".like" est le bouton en question, alors que ta fonction dit ceci: "Lorsque tu cliques sur une balise <button> qui se trouve dans un élément qui à la class .like"

Change simplement cette ligne par :

$('.like').click(function () {

Ou encore mieux, dans le doute:

$('body').on('click', '.like', function() {
Layp, il y a 8 ans

Bonjour, TokaLazy
Désolé de ne pas t'avoir répondu,
mais merci pour ta reponse qui a tres bien marché