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


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
Auteur

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

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
Auteur

bonjour Betaweb, j'ai toujours l'erreur.

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

wenz
Auteur

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

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
Auteur

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

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();