Monday, November 14, 2016

infinite load more data at page end

<!DOCTYPE html>
<html>
<head>
    <title>Loading</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <style type="text/css">
        .loadedcontent {min-height: 800px; }
    </style>
</head>
<body>
<input type="hidden" value="0" id="numCount"></input>
<div id="container">
    <div style="border:1px solid" class="loadedcontent">old div</div>
</div>

</body>
</html>
<script type="text/javascript">
var processing;

$(document).ready(function(){
    $(document).scroll(function(e){
        if (processing){
            return false;
        }

        if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.7){
            processing = true;
            var numCount=$("#numCount").val();
            numCount++;
            var data1='<div class="loadedcontent">new div'+numCount+'</div>';
            //var sortData = $('#productsearchid').serialize();
            //var sortData = {};
            //sortData['category_name'] = 'electronics';
            //$.ajax({
            //    url:"load_data.php",
            //    cache:false,
            //    type:'GET',
            //    data:sortData,
                //success:function(data){
                    $('#container').append(data1);
                    $("#numCount").val(numCount)
                    processing = false;
                //}
            //});
        }
    });
});
</script>

No comments:

Post a Comment