AJAX Request Help for next/previous page
Try something like this... Keep a global variable called currentPage
and simply 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 data accordingly.
Phill Pafford
Love development with PHP/Symfony/PHPStorm, iOS, PostgreSQL, Linux flavor Ubuntu, jQuery/Mobile, Foundation CSS, GitFlow AVH and HTML5 Personal Projects are Crypto Currencies, Home Automation, Mobile development, SMS/MMS and DIY electronics via Make and Hack A Day https://keybase.io/phillpafford https://onename.com/phillpafford #bitcoin: https://www.coinbase.com/phillpafford #DogeCoin: D67fwUKwKQQeL9pdbZmbWcevuAYW8XPqyz
Updated on June 04, 2022Comments
-
Phill Pafford almost 2 years
How do I use AJAX to get the Next/Previous Page(s).
How to call in a browser:
page.php?page=1-1
or
page.php?page=1
The return is just text.
Should load pages in this format:
1-1 or 1
When the user clicks the next/previous page button(s) how do I pass that page number to the ajax call and display the results.
Also how do I keep track of what page the user is currently viewing? And how do I put a max min for pages, like I have 100 pages don't make call for page 101
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 is not working)
$("#loadPages").click(function(){ $.ajax({ url: 'page.php', data:{'page': '1-1'}, error : function (){ alert('Error'); }, success: function (returnData) { alert(returnData); $('#displayResults').append(returnData); } }); });