Mysql
 sql >> Base de Dados >  >> RDS >> Mysql

Resultados de carregamento automático buscando os mesmos resultados repetidamente


Tente isso
<?php
$keywords = 'events';
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>    
    <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
  </head>
  <body>

        <div class="col-lg-12" id="results"></div>
        <div id="loader_image"><img src="loader.gif" alt="" width="24" height="24"> Loading...please wait</div>
        <div class="margin10"></div>
        <div id="loader_message"></div>
        </div>

 <script type="text/javascript">
    var keywords = '<?php echo $keywords; ?>';  // Changed
    var busy = false;
    var limit = 15;
    var offset = 0;
    function displayRecords(lim, off) {

    // Changed/New
    var data = {
        'limit': lim,
        'offset': off,
        'keywords': keywords,
    };
        $.ajax({
        type: "GET",
        async: false,
        url: "getrecords.php",
        data: data, // Changed
        cache: false,
        beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
        },
        success: function(html,textStatus,jqHXR) {
            $("#results").append(html);
            $('#loader_image').hide();
            if (html == "") {
                $("#loader_message").html('<button class="btn btn-default" type="button">No records found.</button>').show()
            } else {
                $("#loader_message").css('display','none');
                $("#loader_message").html(html);
            }
            window.busy = false;
        },
        });
    }
    $(document).ready(function() {
        // start to load the first set of data
        if (busy == false) {
            busy = true;
            // start to load the first set of data
            displayRecords(limit, offset);
         }
        $(window).scroll(function() {
            // make sure u give the container id of the data to be loaded in.
            if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {


$('#result').on('scroll', function() { if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) { busy = true; offset = limit + offset; setTimeout(function() { displayRecords(limit, offset); }, 500); } })
                // you can remove the above code and can use directly this function
                // displayRecords(limit, offset);
            }
        });
    });
</script>

  </body>
</html>