Jscroll loading same content

Question

I am using jscroll to autoscroll content. Script section is given below

  <script type="text/javascript">
        $('ul.pagination').hide();
        $(function() {
            $('.infinite-scroll').jscroll({
                refresh: true
                autoTrigger: true,
                loadingHtml: '<img class="center-block" src="/images/loading.gif" alt="Loading..." />',
                padding: 0,
                nextSelector: '.pagination li.active + li a',
                contentSelector: 'div.infinite-scroll',
                callback: function() {
                    $('ul.pagination').remove();
                }
            });
        });
    </script>

Now my blade.php

<div class="infinite-scroll">    
   @foreach($questions as $q)
      <div class="panel panel-default pan">
        <div class="panel-heading pin" role="tab" id="heading{{$q->id}}">
           <h4 class="panel-title">
           <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{$q->id}}" aria-expanded="true" aria-controls="collapse{{$q->id}}">
                                        {{ substr($q->question,0,55)}}....                                </a>
            </h4>
          </div>
        <div id="collapse{{$q->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$q->id}}">
           <div class="panel-body">
               {{$q->question}}
                <div class="comments-holder" id="ch{{$q->id}}">                                        
                   @foreach($q->comment as $c)
                      <div class="comment-item">
                          <div class="avatar">
                              <i class="fa fa-user"></i>
                          </div>
                          <div class="comments">
                              <h6>{{$c->username}}</h6>
                              <p>{{$c->comment}}</p>
                         </div>
                       </div>
                  @endforeach
               <div class="comment-form">
              @if(Auth::user())
                <form id="{{$q->id}}" class="commentform">
                  {{csrf_field()}}
                  <textarea name ="comment" class="comm_clear" id="comment{{$q->id}}" required placeholder="Type your comments" rows="3"></textarea>
                  <input type="hidden" name="question_id" id="question_id{{$q->id}}" value="{{$q->id}}"/>
                  <button type="button" class="discussion" onclick="submitq(this)">Submit</button>
                   </form>       
                   @endif 
                  </div>
               </div>
             </div>
          </div>
         </div>
        <?php $i=1;?>
        @endforeach
        {{ $questions->links() }}
      </div>

My controller code is

  $questions = Question::where('lesson_id', '=', $lesson->id)->paginate(4);
        foreach ($questions as $q) {
            $q->comment = Comment::join('users', 'users.id', '=', 'comments.user_id')
                ->select('users.name as username', 'comments.comment')
                ->where('question_id', '=', $q->id
                )->get();
        }

My problem is same data is loading infinitely.I have attached screenshot.How to stop load data if not available.The same content is repeating when i scroll down.I am stuck here.

Answer 1

Your code seems complex to me, it may take time to understand it to anyone who is willing to help, and I think that's why you are not getting any responses.

I recommend to test jscroll first on your system on something small, try to minimize the code in order to separate Laravel and jscroll

Let's say get simply all columns of a table and display them in a small view with pagination of let's say 5 rows and implement jscroll on it.

Check if it works, if it does, then gradually insert your actual application logic into it and keep testing.

In my opinion this is good way to identify the bug by separating it from other parts of your application