CODEWITHSUNDEEP
javascriptphpjqueryajax
M1X
M1X

Reputation: 5354

new ajax request on scroll

this is javascript 

 $(window).scroll(function() {
         $.ajax({
            type: "GET",
            url: "not_data.php",
            data: dataString,
            success: function my_func () {
               //show new name
            }
        });
      });

this is not_data.php

<?php

$name_query=mysql_query("SELECT name FROM  names");
        while($run_query = mysql_fetch_assoc($name_query)) {
            $name = $run_query['name'];

            echo $name;
}
?>

i want to call a new ajax request and get a new name from table names everytime user scrolls down

Upvotes: 1

Views: 3435

Answers (4)

kasper Taeymans
kasper Taeymans

Reputation: 7026

have a look at this excellent jquery plugin!

http://jscroll.com/

jScroll is a jQuery plugin for infinite scrolling, written by Philip Klauzinski. Infinite scrolling; also known as lazy loading, endless scrolling, autopager, endless pages, etc.; is the ability to load content via AJAX within the current page or content area as you scroll down. The new content can be loaded automatically each time you scroll to the end of the existing content, or it can be triggered to load by clicking a navigation link at the end of the existing content.

Upvotes: 2

Tabraiz Ali
Tabraiz Ali

Reputation: 677

Check If you have reached bottom and load more(send ajax call)

var win = $(window),
    doc = $(document);

win.scroll(function(){
    if( win.scrollTop() > doc.height() - win.height() ) {
        $.ajax({
            type: "GET",
            url: "not_data.php",
            data: dataString,
            success: function my_func (name) {
                $('<span>').html(name).appendTo('body')
            }
        });
    }
});

Upvotes: 0

Anil kumar
Anil kumar

Reputation: 4177

Try like this.

$(window).scroll(function() {
    if( $(window).scrollTop() == $(document).height() - $(window).height()) {
        $.ajax({
        type: "GET",
        url: "not_data.php",
        data: dataString,
        success: function (res) {
           // new name will be available in 'res' you can display in what way you like.
        }
        });
    }
});

Upvotes: 1

Турман Владислав
Турман Владислав

Reputation: 44

creat param for check loading state; bind to scroll event get two params

var top = $(this).scrollTop();
var height = $(this).height();

check scroll height

if (elHeight - top - height <= 50)

where elHeight - height of all element

and when it's true do your query

Upvotes: 0

Related Questions