Infinite scrolling inside a div with AJAX (jQuery) loaded date

I've been trying to figure this out over several questions here on SO, finding out the different parts and then assembling them, but now I'm giving up.

What I'm trying do do:

The user is on a page, clicks a button and a list of content loads into a div using jQuerys .ajax. When he or she scrolls to the bottom of the div, load more content. As seen on Twitter, but this is inside a div.

I've seen examples on how to have infinite loading in scroll, but the problem is that those examples reload the entire page (it seems)

Has anyone got any idea how I can accomplish this?

As said, I cannot accomplish this using normal means.

The page is build as:

Page 1, has a div, empty until the user clicks a button.

Page 2 loads a lot of content. When the user clicks on the button on page 1, this is loaded into the div.

When the user scrolls through the div (I开发者_开发问答t has overflow set to auto) and ends at the bottom of the div it should load the next page or so to speak.

Thanks in advance! :)

There are some plugins which do this for you quite well.

http://www.webdeveloperjuice.com/2010/02/24/create-infinte-scroll-effect-using-jquery-with-demo/

http://www.beyondcoding.com/2009/01/15/release-jquery-plugin-endless-scroll/

EDIT: Some more up to date plugins:

https://github.com/fredwu/jquery-endless-scroll

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Use the JQuery.load() method to grab some html content and then insert it into an html element.

If you're using Paul Irish's Infinite Scroll, you can just specify a binder as one of the arguments where you have implemented infinite scroll, just like this:

$('.mydiv').infinitescroll({
     binder: $(".name-of-div")  

The binder is set to the document window by default, but if you specify it, you can have infinite scroll running simply inside one div on your page