So I'm attempting to make a method which has three parts. A menu, a content area, along with a pagination area. All these areas, excluding menu, is loaded using a .load call from jquery at run time. I'm carrying this out like a wordpress wordpress plugin incidentally.

For example at load, I load the posts.php via .load in to the .content class and also the page.php via .load in to the .pagination class. This really is all completed with default configurations, ie I send default configurations via publish approach to load. Recption menus code can there be from the beginning.

The problem is by using pagination. I'd like it then when clicking the following page it loads the following content and slowly move the page on the pagination system, with out loading the entire page again in wordpress. I believed jquery works here however the problem is when I call pagination like a jquery call, whenever a user clicks the following page, the recognition would need to be nested within the first pagination call, right? Which just because a massive loop.

Therefore the problem is how you can create a pagination system which will call the following content and load it in to the content area and slowly move the page up in the own system, without needing to load the entire page again because of it as being a wordpress plugin in wordpress.

Any help?

edit: I wish to explain that i'm more recent to jQuery.

Presuming your load() returns data that appears something similar to this:

<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
<div id='pagination'> 
    1 
    <a href='/path/to/this/page?page=2'>2</a>
    <a href='/path/to/this/page?page=3'>3</a>
</div>

You can modify all the <a> tags after loading them right into a particular div, like so:

$('#mymenu').load('/path/to/this/page?page=1', function(){
    setAjaxLinks();
});

And also have a function setAjaxLinks defined such as this:

$('#mymenu').find('a').click(function(event){
    event.preventDefault();
    $('#mymenu').load($(this).attr('href'), function(){
        setAjaxLinks();
    });
    return false;
});

The main factor from the setAjaxLinks function is it sets a function for how to proceed whenever a link is clicked on. That is:

  1. Send an AJAX request for the following page and load it in to the appropriate location around the page.
  2. Discover the paging links within the response, and replace their click occasions using what we want the paging links to complete, that is...

    A. Send an AJAX request.. and

    B. Discover the paging links within the response, and replace their click occasions with....

Therefore we finish track of a recursive setAjaxLinks call.