infinitescroll ne marche pas

Par wenz, il y a 10 ans

Javascript

Bonjour je suis entrain de mettre en place un scroll infini avec infinitescroll mais ça ne marche pas,j'utilise le framework cakephp je suis entrain de faire une erreur quelque ou avec cakephp il y a une autre manière de faire? Merci voici la portion de mon code.

<?php $this->set('title_for_layout', 'All Comments'); ?> <div class="row"> <div class="col-md-2"></div> <div class="grid_entry row masonry col-md-8 col-sm-8"> <div class="container"> <br> <div class="content-white row"> <div class="info-view"> </div><br> <div class="row"> <div id="comment-list"> <div class="col-md-9"> <?php $i=0; ?> <?php foreach($allcomment as $all):$comment=$all['Comment']; $user=$all['User']; $reply=$all['Commentreply'];$i++;?> <div class="lefting comment-item" > <div class="row"> <div class="col-md-1" align="center"> <?php $user_connected=AuthComponent::user(); if($user['role']!='adepte'){ $filename = APP.'webroot'.DS.'uploads'.DS.'users'.DS.'church'.DS.$user['visuel']; $file=false; $file = file_exists($filename); if ($file && $user['visuel']!='') { echo $this->Html->image($user['image_path'], array('width'=>'33px')); }else{ echo $this->Html->image('logo.png',array('width'=>'33px')); } }else{ $filename = APP.'webroot'.DS.'uploads'.DS.'users'.DS.'faithful'.DS.$user['visuel']; $file=false; $file = file_exists($filename); if ($file && $user['visuel']!='') { echo $this->Html->image($user['image_path'], array('width'=>'33px')); }else{ echo '<div style=" background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); width:40px; height:40px;"></div>'; } } ?> </div> <div class="col-md-9" id="commentt"><?php echo '<b>'. $this->Html->link($user['nom'],$user['link']).'</b>'.'&nbsp;'.$comment['created']; ?><br> <i><?php echo $comment['content'];?></i><br><br> <?php foreach ($reply as $repl){?> <div class="row"> <div class="col-md-1 col-sm-1 col-xs-1" style="padding-top:0.5em;"> <?php if($repl['User']['role']!='adepte'){ $filename = APP.'webroot'.DS.'uploads'.DS.'users'.DS.'church'.DS.$repl['User']['visuel']; $file=false; $file = file_exists($filename); if ($file && $repl['User']['visuel']!='') {?> <?php echo $this->Html->image($repl['User']['image_path'], array('width'=>'27px')); }else{ echo $this->Html->image('logo.png',array('width'=>'27px')); } }else{ $filename = APP.'webroot'.DS.'uploads'.DS.'users'.DS.'faithful'.DS.$repl['User']['visuel']; $file=false; $file = file_exists($filename); if ($file && $repl['User']['visuel']!='') {?> <?php echo $this->Html->image($repl['User']['image_path'], array('width'=>'23px')); }else{ echo '<div style=" background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33)); width:40px; height:40px;"></div>'; } } ?> </div> <div class="commentary col-md-11 col-sm-11 col-xs-11"> <div align="justify"><a href="<?php echo $this->Html->url($repl['User']['link']);?>"><?php echo '<strong>'.$repl['User']['nom'].'</strong>';?></a> <?php echo $repl['content'];?></div> <div class="commentdate"><?php echo $repl['created'].'&nbsp;&nbsp;'.$this->Html->link(__('Delete',true),array('controller'=>'users','action'=>'delete_comment',$repl['id']),array('class'=>'deletecomment'));?></div> </div> </div><br> <?php }?> </div> <div class="col-md-2"> <a href="<?php echo $comment['id'];?>/#" id="clickMe<?php echo $i;?>" class="btn btn-default comment",title="<?php echo __("COMMENT");?>"><i class="glyphicon glyphicon-comment"></i> <?php echo __('Reply...');?></a> <?php // echo $this->Html->link('Reply',array('controller'=>'users','action'=>'comment'),array('class'=>'btn btn-default')); ?></div> </div> </div><br> <?php endforeach;?> <div class="row"> <div class="col-md-2 right"></div> <div class="col-md-8" align="center"> <?php echo $this->Paginator->next('next comment...'); ?> </div> </div> </div> <div class="lefting-border col-md-3"> lqkkksllqllksdkqlk </div> </div><br><br> </div> </div> </div> <div class="col-md-2"></div> </div> <script> $(function(){ var $container = $('#comment-list'); $container.infinitescroll({ navSelector : '.next', // selector for the paged navigation nextSelector : '.next a', // selector for the NEXT link (to page 2) itemSelector : '.comment-item', // selector for all items you'll retrieve debug : true, dataType : 'html', loading: { finishedMsg: 'plus de commentaires', img: '<?php echo $this->webroot; ?>img/spinner.gif' } } ); }); </script> <?php echo $this->Html->script('jquery-1-10-2.min'); echo $this->Html->script('jquery.infinitescroll.min'); ?> <?php echo $this->Html->script('jquery.js');?> <?php echo $this->Html->script('javascript.js');?>

9 réponses

Lartak, il y a 10 ans

Bonjour.
Tu utilises combien de fichier javascript de jQuery ?
Au cas ou tu ne le saches pas : jquery-1-10-2.min et jquery.js, c'est la même chose (à moins que le second fichier soit de ta création), la seule différence entre les deux, c'est que le premier est minifié.
As-tu regardé dans la console de l'inspecteur de ton navigateur si elle ne te retourne pas une erreur ?

wenz, il y a 10 ans

excuse moi c'est la forme minifié que j'utilise, j'ai l'erreur suivante : TypeError: $container.infinitescroll is not a function

betaWeb, il y a 10 ans

Salut,

Je vois que tu as inclus tes JS, et notamment de la lib infiniteScroll, après le script dans le quel tu instancie le plugin (ndr infiniteScroll). Je pense que si tu ouvres ta console développeur, tu aura une erreur du genre "undefined is not a function'.
Essaye de mettre le script contenant ton appel au plugin infiniteScroll APRES avoir inclus les JS.

wenz, il y a 10 ans

bonjour Betaweb, j'ai toujours l'erreur.

betaWeb, il y a 10 ans

Donc c'est soit que le JS de infiniteScroll est inclu APRES ton script, soit qu'il y a une erreur de path.

wenz, il y a 10 ans

tu veux quoi par une erreur de path, explique moi un peu srp, merci

betaWeb, il y a 10 ans

Path = chemin, donc le lien qui mène au script de la lib en gros. Tu es sur que le fichier s'appelle bien "jquery.infinitescroll.min.js" (vérifies la casse notamment) ?

wenz, il y a 10 ans

oui j'ai tout verifier, c'est tjourjours la même erreur, c'est ce que je ne comprends pas

betaWeb, il y a 10 ans

Donc c'est possible aussi que ton objet jQuery $('#comment-list') soit vide, donc que l'élément ayant pour id 'comment-list' n'existe pas dans le DOM ou que celui-ci soit chargé APRES que tu aies appelé le plugin $.infinitescroll();