Scroll infini + script jquery ( qui ne charge plus )
salut a tous,
j'ai beau bouger dans les 4 coins du web pour trouver une solution a mon problème et je ne trouve pas !
Sur la page de mon site vous avez vos articles avec un bouton "supprimer", et un bouton "jaime".
-
Mon probleme est :
j'ai suivi le tuto grafikart pour le scroll infini, il marche tres bien MAIS quand les informations sont chargés, mes boutons "supprimer" et "jaime" en JS ne marche plus .( je click , rien ne se passe ) -
Mes test :
alors j'ai essayé de les recharger a partir du fichier "load.php" et la sa a marché mais même trop marché ... je m'explique, quand je scroll et que les informations s'affiches par le fichier "load.php",et ensuite quand je clique sur "j'aime" c'est comme si il clique 2 fois ... 3 fois si je charge le fichier "load.php" 3 fois . donc sa ne va pas non plus.
les éventuelles solution, je pense a recharger juste le fichier "jaime.js" et "suprimer.js" une seul fois pour tous les articles a chaque fin de chargement du fichier "load.php" ( mais la je sais pas si c'est possible ou bien la vrai solution )
si vous avez besoin de plus d'explication , demander sur quoi j’essayerai de développer , merci de votre attention!
js.
<script type="text/javascript">
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
$.ajax({
url : "load.php?lastid=" + $(".bcrpc_message:last").attr("id") + "&iduser=" + $(".userid").attr("id"),
success: function(html){
if (html){
$(".bcrp_content").append(html);
}
else{
alert('plus rien :(');
}
}
});
}
});
</script>
8 réponses
OUIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII ( dsl c'est tellement bon de trouver ! XD ) donc la solution j'ai utilisé une class "jaimeload" [u]temporaire ![/u] c'est a dire je modifi/regle seulement les nouveaux elements. [u]pour les cliques[/u], c'est simplement affecter a mon bouton "JaimeWall.click" qui est dans *jaime.js* avec "jaimeload" ( pour ne pas remettre en plusieurs fois la fonction sur les anciens bouton j'aime , sinon ca l’exécutera autant que fois que j'aime LOAD les nouvelles infos) [u]pour les préchargement[/u], j'ai réécris la fonction dans le scroll infini avec "jaimeload" et je supprime "jaimeload" quand j''ai fini mes reglage pour que les nouveaux "jaimeload" puissent etre configurer ... je te remercie beaucoup de ton aide s4p. :) js : [code] success: function(html){ if (html){ $(".bcrp_mur").append(html); $(".bcrp_mur").find('button.jaimeload').click(JaimeWall.click); var jaimesload = $(".bcrp_mur").find('button.jaimeload'); for(var i = 0, l = jaimesload.length; i 0) { if (votexist == true) { $(this).html("Je n'aime plus (" + votes + ") "); $(this).removeClass("jaimeload"); } else { $(this).html('J’aime (' + votes + ')'); $(this).removeClass("jaimeload"); } } else { if (votexist == true) { $(this).html("Je n'aime plus"); $(this).removeClass("jaimeload"); } else { $(this).html('J’aime'); $(this).removeClass("jaimeload"); } } } }); } // for } else{ alert('plus rien :('); } } [/code]
Salut,
quand tu affectes un click en faisant :
$('.like').click(function(){ save_like(); });la fonction save_like() est affectée au click sur les éléments .like présents dans la page.
Quand tu réinsères du code html, s'il comporte des éléments .like, il faut rebinder la fonction
exemple :
if (html){
$(".bcrp_content").append(html).find('.like').bind('click', function(){ save_like(); });
}exemple 2 :
function bind_like(){ $('.like').click(function(){ save_like(); }); }
if (html){
$(".bcrp_content").append(html);
bind_like();
}Avec 'live' tu n'as pas besoin de mettre à jour, ça se fait tout seul :
$('.like').live('click', function(){ save_like(); });alors je vois un peu se que tu veux dire mais n’étant pas un expert avec js ( mais j’apprends tous les jours ^^ ) je crois que mon bouton "*j'aime*" n'est pas celui que tu imagine . jaime.js [code] var JaimeWall = { evenements: function() { // $('a.jaime').click(this.click); $('button.jaimemur').click(JaimeWall.click); }, precharger: function() { var jaimesmur = $('button.jaimemur'); for(var i = 0, l = jaimesmur.length; i 0) { if (votexist == true) { $(this).html("Je n'aime plus (" + votes + ") "); } else { $(this).html('J’aime (' + votes + ')'); } } else { if (votexist == true) { $(this).html("Je n'aime plus"); } else { $(this).html('J’aime'); } } } }); } // for }, click: function(event) { var element = event.currentTarget; // comme this ( et non: event.target ) $(element).unbind('click'); // stopper les multi-clicks $(element).click(function() { return false; }); // blocage du lien $.ajax({ context: element, // $(this) type: 'POST', url: './jaime.php', data: 'click=1&id_mur=' + encodeURIComponent($(element).attr('id')), success: function(data) { var votes = parseInt(data); var votexist = isNaN(data); if(votes > 0) { if (votexist == true) { $(this).html('vous aimez ça (' + votes + ') '); $(element).unbind('click'); } else { $(this).html('J’aime (' + votes + ')'); $(element).unbind('click'); } } else { if (votexist == true) { $(this).html('vous aimez ça'); $(element).unbind('click'); } else { $(this).html('J’aime'); $(element).unbind('click'); } } $(this).animate({'opacity':1}, {'duration':'slow'}); }, error: function() { alert('Une erreur s\'est produite, merci de recharger votre page'); } }); return false; } }; $(document).ready(function() { JaimeWall.evenements(); JaimeWall.precharger(); }); [/code] je vois pas tres bien comment je pourrais intégré sa dans le code que tu ma donnés [code]$(".bcrp_content").append(html).find('button.jaimemur').bind('click', function(){ [code a inséré ?] });[/code]
A la fin de la fonction success du JaimeWall.click, as-tu essayé de relancer JaimeWall.evenements() ?
Pour empêcher les clicks, qu'il n'y ait pas de nouvelle requête alors que la précédente n'est pas terminée, je met une classe particulière sur l'élément que j'enlève une fois la requête terminée. Comme ça pas d'unbind, la fonction reste en place, il faut juste tester la présence de la classe sur l'élément pour savoir si la requête doit être exécutée ou non.
bon j'ai essayer sa :
click: function(event) {
var element = event.currentTarget; // comme this ( et non: event.target )
$(element).unbind('click'); // stopper les multi-clicks
$(element).click(function() { return false; }); // blocage du lien
$.ajax({
context: element, // $(this)
type: 'POST',
url: './jaime.php',
data: 'click=1&id_mur=' + encodeURIComponent($(element).attr('id')),
success: function(data) {
var votes = parseInt(data);
var votexist = isNaN(data);
if(votes > 0) {
if (votexist == true) {
$(this).html('vous aimez ça (' + votes + ') ');
$(this).removeClass("jaimemur");
} else {
$(this).html('J’aime (' + votes + ')');
$(this).removeClass("jaimemur");
}
} else {
if (votexist == true) {
$(this).html('vous aimez ça');
$(this).removeClass("jaimemur");
} else {
$(this).html('J’aime');
$(this).removeClass("jaimemur");
}
}
$(this).animate({'opacity':1}, {'duration':'slow'});
},
error: function() {
alert('Une erreur s\'est produite, merci de recharger votre page');
}
});
return false;
}mais sa ne marche pas avec sa :
$(".bcrp_content").append(html).find('button.jaimemur').bind('click', function(){ JaimeWall.evenements(); JaimeWall.precharger(); });quand je clique sa fait : j'aime => vous aimez ca => je n'aime plus => j'aime .
chaque seconde sa change
PS : dans ma base de donné la requete est ajouter supprimer entre 5 a 10 fois ( je vois la différence avec l'id auto incrément)
ok si je fais ce code sa marche bien :
$(".bcrp_mur").append(html).find('button.jaimemur').click(JaimeWall.click);mais comment faire pour precharger chaque bouton "jaime" ?