Load Data while Scrolling Page Down with jQuery and PHP

and as of 07/2009 jquery is up to version 1.3.2

It's working with jquery 1.3.2 also...

Nice information

http://www.quirksmode.org/dom/events/scroll.html

I wish you included a real javascript version (not with jQuery) so we can implement this with a few lines of proper javascript without having to load the entire jQuery framework.
That's what's frustrating with jQuery, it's that nobody is writing custom javascript code anymore!...

This works great thanks...

I had a quite the dilemma. I was loading a rather large user list into a facebox modal window. It was taking about 6 seconds to display the entire list. At first I thought I'd just paginate the list, but things got real complex quick.

So I adopted your code above to my facebox and it works great.

Thanks for saving me a good amount of time.

For those of you interested in using this one a scrollable DIV instead of a window try using this code for scroll function:

$('div.content').scroll(function(){
if ($('div.content').scrollTop() + $('div#facebox').height() >= $('div.content').height()) {
last_msg_funtion();
}
});

I will invite you to Ghana. Next Year.
Ebow Ansah

its awesome dude
gr8 work

@arvind.b

thank you!

it doesn't work unless you scroll slowsly. I tried your demo in IE and firefox to confirm. The reason is, it would pass the same id twice, if second scroll event occurs, while secondload.php is still fetching data.

Hello!

After many test, This script is fine but not scalable. I meet bug everywhere and for all browser when i try to mix it with some jquery or put the script inside js file.

It return this error code :
-- Chrome :
Uncaught TypeError: Object function (D,E){return new n.fn.init(D,E)} has no method 'setInterval' ---

---IE8 :
Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; InfoPath.2; .NET CLR 3.0.30729)
Horodateur : Thu, 4 Feb 2010 21:38:11 UTC


This object don't support this http://.../livehome.js

how can i make it cycle through a given string of id's like "[2,21,114,3]" instead of adding on the previous hit?

Hey I want my webpage load like flickriver.com
i am not getting any script.

even I tried this script but it is not working, can anybody tell me how to implement it.
if live chat possible, it would be great.

id:- [email protected]

thanks

nice article, but anybody knows how to do it in asp.net.
thanks

finally i found it.
Thanks for the code.

it really helped. :D

Thank for lesson )

great piece of code man...you did good. But have you figured a solution to the double and sometimes triple load? If you scroll too fast, it will load the data twice and sometimes thrice...

check it out http://www.afrikaspeaks.com

Hey...just wanted to let you know that I fixed the repetitive data display. It had to do with the loader. Make sure that it's set outside the main content area. eg

if your content is 600px. set your load_msg_loader to say 700px and a negative top margin of say -100px and aligned to right! this solved mine for me. You can see it at work on my news portal www.afrikaspeaks.com

Thanx man

Just what I needed. Thank you very much for posting this!

very helpfull, thx for sharing

Thanks a lot for sharing knowledge

Hey, thanks very much for sharing this piece of code. I've modified it a bit to fit my video blogging site, and it really ads a useful effect. I still have a little trouble with double results if scrolling down too fast, but it's not serious.

Best!
Dan

repetitive data-issue:
you could also do something like setting a variable if there is content to load. while this is true, the last_msg_funtion() will not be called. if the feedback comes, you set it back:
if (data != "") {
$(".message_box:last").after(data);
// here you set the loadData variable to false
}
i've done something like that here http://deschavü.ch/dejavu, and tested it on firefox3.6, Safari4, Opera(quiteNew), ie7 and ie8. it worked in all these browsers, but in firefox, when you reload the page and you're on the bottom of all entries.
THX for the code BTW$$$

hello, how if I want to get new records from database for every 10 seconds? The conflict between the two features below :
1) feature of reload page for every 10 seconds to get new records.
2) feature of get older records when user scroll down to the page.

Because both features above are depend on the same variable $last_msg_id, how can I solve the conflict between the two features?

thank u it works :)

Hi Sri,
This is a great tutorial.
I tried this for my application.
But the problem come, when user scroll down very fast.It loads the data multiple time....

Any idea how can we overcome from this issue.
Thanks,
Gaurish

Hi, how to create similar function which loads data by clicking "Load More" button instead of scrolling down? I want to implement at http://www.livepage.info Thank you!

@Livepage

Try this http://www.9lessons.info/2009/12/twitter-style-load-more-results-with.html

Cant fix double load.

PLease help

thank you very much

U did great.Can i reload the content in particular div instead of whole document??? Please help me!

how to fix this double load problem . maximum times it loads three four times the second page contents.please tell if anyone has solved this problem

Set a variable to prevent it from being called. Some of the names are changed slightly in my example, but this fixes it:



var bSuppressScroll = false;

$(document).ready(
function()
{
function last_msg_funtion()
{
var ID=$(".search-result-list-element:last").attr("id");
$('div#loading').show();
$.post($('div#next_message_location').html() + "?p=" + ID,

function( data )
{
if (data != "")
{
$(".search-result-list-element:last").after(data);
window.bSuppressScroll = false;
}

$('div#last_msg_loader').empty();
$('div#loading').hide();
} );
};

$(window).scroll(function(){
if ( ( $(window).scrollTop() == $(document).height() - $(window).height() ) && window.bSuppressScroll == false ){
last_msg_funtion();
window.bSuppressScroll = true;
}
});
});

Excelente site, ótimo conteúdo...

The script aint working in IE, not your demo either.

thanks, helped me a lot,, very very good,

Thank you Mark Lane !
That worked for me. No more double posts.

This seems to be almost exactly what I need to make my site actually function! I'm so close, I can taste it! Right now I have a site using the Wordpress eCommerce Plugin (getshopped.org) to sell prints. There ultimately needs to be ~7000 products on a single page and as you might imagine the page takes AGES to load as it is right now with only 3000 products on the page. How would I implement this into my WPEC products page so I can actually make my site usable instead of the bloated Frankenstein of a page that it is right now?

this code is nice but if can fix the issue
the issue is

the show more function u have created is called when user scroll down. but if i already loaded the maximum results then the loader should not load, this may create confusion to user that there may be still more data to be loaded.
what do u say.

i got an error "Could not connect database"..please help how to fix this..

it works but on top of all i get these 2 errors:

Notice: Undefined index: last_msg_id in /opt/lampp/htdocs/reg/load_data.php on line 5

Notice: Undefined index: action in /opt/lampp/htdocs/reg/load_data.php on line 6

This is possible in blogspot?

multiple fetches occur
ps on ie it always fetches3 time

I have problem with Internet Explore, Rows duplicate....

Hi I am working inside an overflow div.In which i used an internal scroll-er with fix height and width of that div container now i want to use the auto load on that container scroll down.

:)

what if in

$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];

if($action <> "get")
{


$last_msg_id and $action are not set :(

Great post.

Use This To Avoid Error Reporting

"get")
{
?>

Thanks a lot!

I used this code successfully but I have a small problem with data formatting.

I have around 2000+ rows of data each row contains 5 columns. I used this code and first time I ma loading 50 rows of data and then each time load_second.php page is called and 50 rows of data are getting populated on the webpage.

I am using table structure to format those data. No my problem is that when load_second.php page's data are getting populated on webpage it foes top of the load_first.php page's data which already loaded on webpage.

Live site : http://agriculture-caluniv.in/load_data.php

Can you guys please let me know a solid solution to this problem?
Ideally the load_second.php page's data should get loaded just below the load_first.php page's data.

Thanks in advance.

Soumya Roy

Pls help...

im trying to retrieve data from many tables (joining) at the same time, but when i scroll down fast it load twice the same data...

any advice pls

ruizewin please follow on mark lane script..it solved the problem...regards

Thank you for a great article and useful tips, guys!

This is super useful, thanks! I've seen this data load trick used before and was always wondering how it's done.

After using the following java script I get the an error: "Unterminated string constant"


var bSuppressScroll = false;
$(document).ready(
function()
{
function last_msg_funtion()
{
var ID=$(".search-result-list-
element:last").attr("id");
$('div#loading').show();
$.post
($('div#next_message_location').html() +
"?p=" + ID,
function( data )
{
if (data != "")
{
$(".search-result-list-element:last").after
(data);
window.bSuppressScroll = false;
}
$('div#last_msg_loader').empty();
$('div#loading').hide();
} );
};
$(window).scroll(function(){
if ( ( $(window).scrollTop() ==
$(document).height() - $(window).height
() ) && window.bSuppressScroll ==
false ){
last_msg_funtion();
window.bSuppressScroll = true;
}
});
});

I am getting the below 2 errors how to solve that?
( ! ) Notice: Undefined index: last_msg_id in C:\wamp\www\try\scroll_data.php on line 5

( ! ) Notice: Undefined index: action in C:\wamp\www\try\scroll_data.php on line 6

@Srinivas sir : Sir i m not able to get through the above problem. I have tried using isset function but the load_second.php is called only once i.e even the scroll function is not working in my code. Can u plzzzzzzzzzzzzz help me out.

very nice tutorial dude , thank you very much for this tutorial

This is not working in Firefox for me. If I comment the following condition, it works:
if($(window).scrollTop() == $(document).height() - $(window).height())

Also when I put any alert within any funtion, whole screen goes blank when scrolled.

It's working on internet explorer 8 while its not working on google chrome :)
can anyone help on how can i make the code running on google chrome

when i tried this code, i getting the error like
" Undefined index: last_msg_id in load_data.php and Undefined index: action in load_data.php"
anyone pls give me solution.
thnku

Hi

some issue in IE, the event is triggering two times, any idea ?

Thanks
Prajoh

Hi Srinivas, my English is very bad.
Iam Brazilian lady.
This code is very good, I'm just having difficulty getting back into a DIV, because I try to leave those windows like Twitter, but the contents from the mysql.
How could I do? gives you a light?
I hope your answer.
Bye

some above code is not working in Mozilla, this could be caused by sub-pixel rendering(http://blogs.msdn.com/b/ie/archive/2012/02/17/sub-pixel-rendering-and-the-css-object-model.aspx?Redirected=true)

to avoid above problem use below code


if ($(window).scrollTop() >= ($(document).height() - $(window).height()-1))

Like this post...

if you are having this problem:

Notice: Undefined index: last_msg_id in /opt/lampp/htdocs/reg/load_data.php on line 5

Notice: Undefined index: action in /opt/lampp/htdocs/reg/load_data.php on line 6

Just add @ to the variables like this @$last_msg_id and @$action, that should solve the problem.

To stop the code from returning double data replace your javascript code with this:

var bSuppressScroll = false;
$(document).ready(function(){
function last_msg_funtion()
{
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('add your loader image here');
$.post("load_data.php?action=get&last_msg_id="+ID,
function(data){
if (data != "") {
$(".message_box:last").after(data);
window.bSuppressScroll = false;
}
$('div#last_msg_loader').empty();
});
};
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height() && window.bSuppressScroll == false ){
last_msg_funtion();
window.bSuppressScroll = true;
}
});
});

Hello All,

I am working Image gallery website. Image serach page will work like google image search. On scroll it shows next results using jquery. How to display the same result if user refresh the page?


Thanks,

Sham

my scrolled div is appearing over 1st div instead of appearing down..y so

thanks man. nice code keep sharing.. :)

Nice one

you must be on google,facebook or twitter like company

thanks it's working but have some errors
You will find the solution in Obinna Okpala comment

Nice one !!!

Good one.
could you tell me how to use this with scroll-able div

$last_msg_id=$_GET['last_msg_id'];
$sql=mysql_query("SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 5");

is wide open to sql injection. It's no wonder people pick up bad habits when tutorials like this completely disregard the fundamentals.

Make sure you validate $last_msg_id by casting to an integer:
$last_msg_id = (int) $_GET['last_msg_id'];

Notice: Undefined index: last_msg_id in E:\xampp\htdocs\ehealth\scroll.php on line 5

Notice: Undefined index: action in E:\xampp\htdocs\ehealth\scroll.php on line 6

help me please...

thank u it's work

How to set my LazyLoad slider after Half page scroll...Help me

Problems of this code on mouse scroll multiple time duplicate data show ........Please remove this problem

what is der inside the config.php file???
reply asap

It's not working in various browsers like mozilla and also while scrolling content css tabs was not working.can you please help how to do?

');
if($db){
}
else{
echo "db not found";
}
}else{
echo "conection not found";
}
?>

I guess the script posted here and that reflected in the demo are slightly different as the demo works fine but when you use the the script here it has the problem of double display of same data etc.

can some one suggest a fix?

Hi guys, I try this code and it works, BUT when all the scripts are loaded inside a frame page doesn't work :(

The code that I use for the frame page is:
< frameset rows="100%, *" frameborder="no" framespacing="0" border="0" >
< frame src="pagescript.php" name="mainwindow" frameborder="no" framespacing="0" marginheight="0" marginwidth="0" >< /frame >
< /frameset >

Any ideas? :(

this is what i need.....thank you so much

Thank you,But this staff has a bug.I call this bug as UpAndDown it means that the scroll ends we must scroll up a little and scroll down again to load data,Facebook has the best!!

I got duplicate rows. Do you know guys how to solve this?

I have changed the below function to prevent duplicates
function last_msg_funtion()
{
if($('div#last_msg_loader img').length){
//Which means previous one is in still load
return;
}
//Other codes here
};

this code work on browser but not working in mobile scroll wht i do

nice indentation ¬¬

we are anonymous

what about this??

Notice: Undefined index: last_msg_id in \\load_data.php on line 6

Notice: Undefined index: action in \\load_data.php on line 7

this is not solving the problem:

"Just add @ to the variables like this @$last_msg_id and @$action, that should solve the problem.
"

what should i do?

it works..although some of line code is error in (load_data.php), but overall everything is good, just add some logic condition on
if(isset($_GET['last_msg_id']))
{
$last_msg_id = $_GET['last_msg_id'];
}
if(isset($_GET['action']))
{
$action=$_GET['action'];
}else{ $action = ''; }

so everything is worked

Hi,
thank you for this tutorial, can you please show me how to do the same using jsp instead of php ?
thanks, your help is appreciated.

when working on whole day i found this code..
and it's working properly..

thnx dude great work....

when i refresh my page it continuously scrolldown..how to prevent ?

Great work dude... Saved me lot of time

Hi
this work correctly on my webpage but I lost my jcart working. plz help me...

Hi I am using ur logic for loading products on my products view page and i also need to add the sorting functionality .But for sorting it requires all the product, How to do?

Thank you! Just what I needed :D

Is there any way to add jQuery Masonry to this :)

what is this line means $action <> "get". what <> means in php

Thank you man!!!!

Thank you man!!!!

I super like this article..

Great tutorial...I just wanted to ask which software or photo editor you use for editing those images?

very helpful

<> means 'not equal' its the same as != . <> is the old method i dont now if it works anymore

Thats Awesome

Hi, Nice Post...
I am using this but how could we use this with filter.
I am not able to pass the filter variable to load_second.php.
please suggest..

How Can i Give Back To Scroll button For this loading page.

the code is working properly but sir page gets reload every time scroll down whats the problem

Does it work in Apple PC's?? Think $(window).scroll wouldn't work there??

This comment has been removed by a blog administrator.

This code is not working in mobile phone.

Nice tutorial.

Notice: Undefined index: last_msg_id in C:\wamp\www\mytest\load_data_scrolling\load_data.php on line 5

Notice: Undefined index: action in C:\wamp\www\mytest\load_data_scrolling\load_data.php on line 6
Help Meee Plzzzzz

loadind data twice plz help

Thank you for beset tutorial and demo,

When i use your code , when i load page and (Ctrl+Home) , (Ctrl+End), (Ctrl+Home) , (Ctrl+End), (Ctrl+Home) , (Ctrl+End), (Ctrl+Home) , (Ctrl+End),….with speed

I have duplicate data , How can i do that ?

Add Reply

It Does not work on Mobile Devices . Anybody here got solution for that ?

It was very good one and very helpul. Nice

load data while scroll using jquery is quite easy now

thank you

Great Tutorials

hello i need coding for when i search something it must display the text in same page without refreshing another page similarly like google in php .will u pls

var ID is not declared.
If var ID is the same as the last ID the user may get slow load or duplicate entries.

I am having an issue with the way the entries are being loaded. After the first entries load, the other entries are loaded in a div but as the "full website". I have no idea what is wrong as I am not an expert with PHP. The site basically loads itself when trying to read the next set of entries into the last_msg_loader div. I need help!!!! Thanks

showing error on load.php undefined index last_mes_id and action

please upload a script after giving tick to checkbox data has to retrive without refreshing page

Thank you

I love you

SAsSas

gud ...