Back

Technologies:

javascriptjavascript
htmlhtml
laravellaravel
avatar
Tolerim
a month ago

How do I include a loading function before the script is sent?

I am in need of assistance with a script for infinite scroll which involves pagination in Laravel. Although the script is perfectly functional, I am unable to add a loading indicator while looking for the next page. I believe it should be something like the code below, but I am unsure of how to implement it as I am new to JavaScript: 

beforeSend: function(){        
  $('.ajax-load').show();
}
Below is the entirety of my code: 

$(document).ready(function(){
  $(window).scroll(fetchCondolences);
  var searching = false;

  function fetchCondolences(){
    if (!searching) { 
      searching = true;
      var page = $('.endless-pagination').data('next-page'); 
      if(page !== null){
        clearTimeout( $.data( this, "scrollCheck"));
        $.data( this, "scrollCheck", setTimeout(function(){
          var scrollpositionforcondolencesload = $(window).height() + $(window).scrollTop() + 100;
          searching = false;
          
          if(scrollpositionforcondolencesload >= $(document).height()) {
            $.get(page, function(data){                                        
              $('.condolences').append(data.condolences);
              $('.endless-pagination').data('next-page', data.next_page);
            });        
          } 
        }, 350)
        .done(function(data){    
          $('.ajax-load').hide();      
        }))
      } else{
        $('.ajax-load').show();
        $('.ajax-load').html("<center>"+ transNomorerecordsfound +"</center>");
      }              
    }
  } 
});
Load more content with a "Load More" button instead of infinite scrolling.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can add a loading indicator to your infinite scroll pagination in Laravel by adding the following code to your script: 
beforeSend: function(){        
  $('.ajax-load').show();
}
This code will show the loading indicator before the next page is loaded. You can also add a loading image to make it more visually appealing. Here is an example of how you can implement it: 
$(document).ready(function(){
  $(window).scroll(fetchCondolences);
  var searching = false;

  function fetchCondolences(){
    if (!searching) { 
      searching = true;
      var page = $('.endless-pagination').data('next-page'); 
      if(page !== null){
        clearTimeout( $.data( this, "scrollCheck"));
        $.data( this, "scrollCheck", setTimeout(function(){
          var scroll_position_for_condolences_load = $(window).height() + $(window).scrollTop() + 100;
          searching = false;
          
          if(scroll_position_for_condolences_load >= $(document).height()) {
            $.ajax({
              url: page,
              beforeSend: function(){        
                $('.ajax-load').show();
              }
            })
            .done(function(data){    
              $('.ajax-load').hide();      
              $('.condolences').append(data.condolences);
              $('.endless-pagination').data('next-page', data.next_page);
            });        
          } 
        }, 350))
      } else{
        $('.ajax-load').show();
        $('.ajax-load').html("&lt;center&gt;"+ trans_No_more_records_found +"&lt;/center&gt;");
      }              
    }
  } 
});
This code will show the loading indicator before the next page is loaded. You can also add a loading image to make it more visually appealing. If you want to use a "Load More" button instead of infinite scrolling, you can check out this guide. I hope this helps! Let me know if you have any other questions.

Sources

How to insert infinite scroll to Laravel Project - Stack OverflowImplementing Infinite Scroll Pagination Using Laravel & jScrollLaravel 5 Paginate + Infinite Scroll jQuery - Stack OverflowA guide to pagination, load more buttons, and infinite scrollLaravel 7 Load More Data On Infinite Page Scroll - Tuts Make
avatar
Tolerim
a month ago
To add a loading indicator, you can update the fetchCondolences function in your code to show the .ajax-load element before making the AJAX request. Here's the updated code: 
function fetchCondolences(){
    if (!searching) { 
        searching = true;
        var page = $('.endless-pagination').data('next-page'); 
        if(page !== null){
            clearTimeout( $.data( this, "scrollCheck"));
            $.data( this, "scrollCheck", setTimeout(function(){
                var scroll_position_for_condolences_load = $(window).height() + $(window).scrollTop() + 100;
                searching = false;

                if(scroll_position_for_condolences_load >= $(document).height()) {
                    // Show loading indicator
                    $('.ajax-load').show();

                    $.get(page, function(data){                                        
                      $('.condolences').append(data.condolences);
                      $('.endless-pagination').data('next-page', data.next_page);
                    })
                    .always(function(){    
                      // Hide loading indicator
                      $('.ajax-load').hide();    
                    });
                } 
            }, 350));
        } else{
            $('.ajax-load').show();
            $('.ajax-load').html("<center>"+ trans_No_more_records_found +"</center>");
        }              
    }
}
In this updated code, the beforeSend function has been removed and replaced with two new lines of code after the $.get function call: 
$('.ajax-load').hide();    
});
This code specifies that the $('.ajax-load') element should always be hidden (using the hide() function) after the AJAX request is complete, whether it succeeds or fails. Additionally, a new line of code has been added to show the loading indicator before the AJAX request is made:
This line of code specifies that the $('.ajax-load') element should be shown (using the show() function) before making the AJAX request.
;