AJAX help for next / previous page

Question

How to use AJAX to get the next / previous page.

How to call the browser:

page.php?page=1-1 

or

 page.php?page=1 

Refund is just text.

Must load pages in this format:

1-1 or 1

When the user presses the button (s) of the next / previous page, how do I pass this page number to an ajax call and display the results.

Also, how can I track which page the user is viewing? And how do I put max min for pages, for example, I have 100 pages does not cause a call for page 101

http://jsfiddle.net/2b8gR/5/

HTML

 <input id="loadPages" name="loadPages" type="button" value="Next" /> <input id="loadPages" name="loadPages" type="button" value="Previous" /> <div id="displayResults" name="displayResults"> </div> 

JS (this does not work)

 $("#loadPages").click(function(){ $.ajax({ url: 'page.php', data:{'page': '1-1'}, error : function (){ alert('Error'); }, success: function (returnData) { alert(returnData); $('#displayResults').append(returnData); } }); }); 

Answer 1

Try something like this ... Save a global variable called currentPage and just adjust the page number accordingly.

LIVE DEMO http://jsfiddle.net/Jaybles/MawSB/

HTML

 <input id="next" type="button" value="Next" /> <input id="prev" type="button" value="Previous" /> <div id="displayResults" name="displayResults">Current Page: 1</div> 

Js

 var currentPage=1; loadCurrentPage(); $("#next, #prev").click(function(){ currentPage = ($(this).attr('id')=='next') ? currentPage + 1 : currentPage - 1; if (currentPage==0) //Check for min currentPage=1; else if (currentPage==101) //Check for max currentPage=100; else loadCurrentPage(); }); function loadCurrentPage(){ $('input').attr('disabled','disabled'); //disable buttons //show loading image $('#displayResults').html('<img src="http://blog-well.com/wp-content/uploads/2007/06/indicator-big-2.gif" />'); $.ajax({ url: '/echo/html/', data: 'html=Current Page: ' + currentPage+'&delay=1', type: 'POST', success: function (data) { $('input').attr('disabled',''); //re-enable buttons $('#displayResults').html(data); //Update Div } }); } 

Then your php page can access $_REQUEST['page']; and return the data accordingly.