Bonjour,
Aujourd'hui je me tourne vers vous suite à un problème que je rencontre avec un système de Scroll Infini, en effet j'aimerai retirer le système de pagination et le remplacer par un système de scroll infini, j'ai regardé celui présent sur GrafikArt et il ne répondait pas à mes demandes, donc j'en ai pris un autre le soucis c'est que j'ai une erreur :
<script type="text/javascript">
$(document).ready(function(){ // Quand le document est complètement chargé
var load = false; // aucun chargement de commentaire n'est en cours
/* la fonction offset permet de récupérer la valeur X et Y d'un élément
dans une page. Ici on récupère la position du dernier div qui
a pour classe : ".commentaire" */
var offset = $('.commentaire:last').offset();
$(window).scroll(function(){ // On surveille l'évènement scroll
/* Si l'élément offset est en bas de scroll, si aucun chargement
n'est en cours, si le nombre de commentaire affiché est supérieur
à 5 et si tout les commentaires ne sont pas affichés, alors on
lance la fonction. */
if((offset.top-$(window).height() <= $(window).scrollTop())
&& load==false && ($('.commentaire').size()>=5) &&
($('.commentaire').size()!=$('.nb_com').text())){
// la valeur passe à vrai, on va charger
load = true;
//On récupère l'id du dernier commentaire affiché
var last_id = $('.commentaire:last').attr('id');
//On affiche un loader
$('.loadmore').show();
//On lance la fonction ajax
$.ajax({
url: './ajax_comment.php',
type: 'get',
data: 'last='+last_id,
//Succès de la requête
success: function(data) {
//On masque le loader
$('.loadmore').fadeOut(500);
/* On affiche le résultat après
le dernier commentaire */
$('.commentaire:last').after(data);
/* On actualise la valeur offset
du dernier commentaire */
offset = $('.commentaire:last').offset();
//On remet la valeur à faux car c'est fini
load = false;
}
});
}
});
});
</script>
J'ai laissé les commentaires pour vous retrouvez, je n'ai pas touché au script j'ai juste adapté mes cadres pour que ça fonctionne.
Voici l'erreur : Uncaught TypeError: Cannot read property 'offset' of undefined
Côté HTML : <div class="commentaire" id="1">Ici il y a un commentaire</div> il est codé avec du PHP pour automatisé tout cela.
Côté de la page appelé ./ajax_comment.php il y a aussi un swtich en PHP avec la div mais elle affiche les prochains cadres par rapport au dernier ID trouvé.
Donc au final, j'affiche les 20 cadres de bases, mais quand je scroll en bas j'ai l'erreur donc rien ne charge.
Donc voilà si vous pouvez m'éclairer.
Merci de votre aide à l'avance.
Cordialement.
Bonjour,
pourrait-on voir le système fonctionner quelque part?
Peux-tu mettre des console.log($('.commentaire:last')) ; juste avant les deux $('.commentaire:last').offset() ?
Bonjour, merci pour ta réponse.
Actuellement je développe le site en local donc je ne peux pas montrer.
Ensuite comme je te l'ai dit, je n'ai aucune connaissance en JS faudrait m'expliquer plus en détail ce que tu souhaites.
Encore merci.
Cordialement.
ça et faut regarder la console javascript du navigateur lorsque que tu scrolles:
<script type="text/javascript">
$(document).ready(function(){ // Quand le document est complètement chargé
var load = false; // aucun chargement de commentaire n'est en cours
/* la fonction offset permet de récupérer la valeur X et Y d'un élément
dans une page. Ici on récupère la position du dernier div qui
a pour classe : ".commentaire" */
console.log('1');
console.log($('.commentaire:last')); //ICI
var offset = $('.commentaire:last').offset();
$(window).scroll(function(){ // On surveille l'évènement scroll
/* Si l'élément offset est en bas de scroll, si aucun chargement
n'est en cours, si le nombre de commentaire affiché est supérieur
à 5 et si tout les commentaires ne sont pas affichés, alors on
lance la fonction. */
if((offset.top-$(window).height() <= $(window).scrollTop())
&& load==false && ($('.commentaire').size()>=5) &&
($('.commentaire').size()!=$('.nb_com').text())){
// la valeur passe à vrai, on va charger
load = true;
//On récupère l'id du dernier commentaire affiché
var last_id = $('.commentaire:last').attr('id');
//On affiche un loader
$('.loadmore').show();
//On lance la fonction ajax
$.ajax({
url: './ajax_comment.php',
type: 'get',
data: 'last='+last_id,
//Succès de la requête
success: function(data) {
//On masque le loader
$('.loadmore').fadeOut(500);
/* On affiche le résultat après
le dernier commentaire */
$('.commentaire:last').after(data);
/* On actualise la valeur offset
du dernier commentaire */
console.log('2');
console.log($('.commentaire:last')); //ICI
offset = $('.commentaire:last').offset();
//On remet la valeur à faux car c'est fini
load = false;
}
});
}
});
});
</script>
Merci encore une fois de ton aide, voici un screen de la console avec le script que tu m'as envoyé :
Les erreurs du dessus ne sont pas problématique, mais comme tu le constate l'erreur n'a pas changé et je n'ai pas plus d'informations.
On a une information supplémentaire! détrompe toi
Le undefined ici présent indique que :
<script type="text/javascript">
$(document).ready(function(){ // Quand le document est complètement chargé
var load = false; // aucun chargement de commentaire n'est en cours
/* la fonction offset permet de récupérer la valeur X et Y d'un élément
dans une page. Ici on récupère la position du dernier div qui
a pour classe : ".commentaire" */
console.log('1');
console.log($('.commentaire:last')); //ICI .//LAAAAAAAAAAAAAAAAAAAA
var offset = $('.commentaire:last').offset();
Au ici , le $('.commentaire:last') renvoit undefined.
Autrement dit, soit jquery est dans une version trop vieille (peu probable).
Soit il n'y a aucune class commentaire dans la page..
Peux tu taper cela en console :
$('.commentaire')
cela renvoi des éléments?
Bonjour,
Pour la version de Jquery j'ai la 1.11.1.
Et pour $('.commentaire'), celui-ci me retourne undefined.
Bonsoir,
undefined est un peu surprenant. Il me semblait qu'on avait un tableau vide si aucun élément ne correspondait au sélecteur.
Il y a bien dans class="commentaire" au chargement de la page?
jQuery est bien chargé avant ton script ??