CODEWITHSUNDEEP
jqueryscrollautoscroll
PrivateUser
PrivateUser

Reputation: 4524

Auto triggering "load more" link using jquery before user reach the bottom. How?

Ok guys. I have a link with class name "more_updates". I want the load more link to be triggered automatically everytime the user reach 80% of the page.

I'm listing 50 products. Each row contains 5 products with images. At the bottom i have load more link. If the user reach 7th or 8th row then the load more link should be triggered automatically. This is the code i'm using. But it loading more products. Please tell me whats wrong in this code. Thanks

<!-- language: lang-js -->
    $(window).scroll(function(){
            if  ($(window).scrollTop() >= ($(document).height() / 2) - $(window).height()){
                if (!flag) {           
                      // if is not loading data, start the call
                      $('.more_updates').click();      // to invoke the click event of loading updates
                }
            }
    });

Upvotes: 4

Views: 3513

Answers (1)

Janez
Janez

Reputation: 2406

I think you are triggering the click event in wrong way (because in your case it isn't triggered by user but by scroll method). Change $('.more_updates').click(); to $('.more_updates').trigger("click");

A call to .trigger() executes the handlers in the same order they would be if the event were triggered naturally by the user

read more here

EDIT/UPDATE:

Stop event bubbling on your click event:

...
$('.more_updates').live("click", function (e) {
e.stopImmediatePropagation()
...

read more here

Also unbind/die click event of .show_more when there no results condition is met:

else { 
  $(".morebox").html('No More Results.'); // no results
  $('.more_updates').die("click");
}

read more here

Upvotes: 1

Related Questions