jQuery create load more button with infinite scroll

Question

In bigger monitor my infinite scroll's doesn't load more another div content if it's finish loaded by div content limit. So I have to fix this problem by create load more button.

How do I create load more button on my code?

scroll.php

 include('db.php');

if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
    call_user_func($actionfunction,$_REQUEST,$con,$limit);
}

function showData($data,$con,$limit){
    $page = $data['page'];
    if($page==1){
        $start = 0;
    }
    else{
        $start = ($page-1)*$limit;
    }

    $sql = "select * from infinitescroll order by id asc limit $start,$limit";
    $str='';
    $data = $con->query($sql);
    if($data!=null && $data->num_rows>0){
        while( $row = $data->fetch_array(MYSQLI_ASSOC)){
        $str.="<div class='data-container'><p>".$row['id']."</p><p>".$row['firstname']."</p><p>".$row['lastname']."</p></div>";
    }
        $str.="<input type='hidden' class='nextpage' value='".($page+1)."'><input type='hidden' class='isload' value='true'>";
    } else {
        $str .= "<input type='hidden' class='isload' value='false'><p>Finished</p>";
    }
echo $str;
}

scroll.js

var ajax_arry = [];
var ajax_index = 0;
var sctp = 100;
$(function () {
    $('#loading').show();
    $.ajax({
        url: "scroll.php",
        type: "POST",
        data: "actionfunction=showData&page=1",
        cache: false,
        success: function (response) {
            $('#loading').hide();
            $('#demoajax').html(response);

        }

    });
    $(window).scroll(function () {

        var height = $('#demoajax').height();
        var scroll_top = $(this).scrollTop();
        if (ajax_arry.length > 0) {
            $('#loading').hide();
            for (var i = 0; i < ajax_arry.length; i++) {
                ajax_arry[i].abort();
            }
        }
        var page = $('#demoajax').find('.nextpage').val();
        var isload = $('#demoajax').find('.isload').val();

        if ((($(window).scrollTop() + document.body.clientHeight) == $(window).height()) && isload == 'true') {
            $('#loading').show();
            var ajaxreq = $.ajax({
                url: "scroll.php",
                type: "POST",
                data: "actionfunction=showData&page=" + page,
                cache: false,
                success: function (response) {
                    $('#demoajax').find('.nextpage').remove();
                    $('#demoajax').find('.isload').remove();
                    $('#loading').hide();

                    $('#demoajax').append(response);

                }

            });
            ajax_arry[ajax_index++] = ajaxreq;

        }
        return false;

        if ($(window).scrollTop() == $(window).height()) {
            alert("bottom!");
        }
    });

});

Here's example live Demo from original site.

Could you clear up your question please? It's very hard to understand what you're asking / what your problem is. — Matthew Herbst
– Matthew Herbst, Commented Apr 8, 2016 at 2:27
Why you are using different condition to check bottom of the page if ($(window).scrollTop() == $(window).height()) { & if ((($(window).scrollTop() + document.body.clientHeight) == $(window).height())) {? — itzmukeshy7
– itzmukeshy7, Commented Apr 8, 2016 at 4:19

Sergey Gornostaev · Accepted Answer · 2016-04-08 10:52:35Z

2

+50

I don't see a problem. Add into html button or link with id "load-more-button" and append this code to scroll.js

$('#load-more-button').click(function(e) {
    e.preventDefault();

    var page = $('#demoajax').find('.nextpage').val();

    $('#loading').show();
    $.ajax({
        url: "scroll.php",
        type: "POST",
        data: "actionfunction=showData&page=" + page,
        cache: false,
        success: function (response) {
            $('#demoajax').find('.nextpage').remove();
            $('#demoajax').find('.isload').remove();
            $('#loading').hide();
            $('#demoajax').append(response);

            var isload = $('#demoajax').find('.isload').val();
            if(!isload) $('#load-more-button').hide();
        }
    });
});

edited Apr 8, 2016 at 10:52

answered Apr 8, 2016 at 4:12

Sergey Gornostaev

7,8373 gold badges32 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vintage Beef Over a year ago

How do I hide load more button when it finished loaded all div content?

Collectives™ on Stack Overflow

jQuery create load more button with infinite scroll

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related