I've been tasked with paginating MySQL query results using Ajax/jQuery rather than in an iFrame. The current iFrame content we use is here: http://www.stratusinternational.com/headerlatest.asp?Page=1&L=EN
The page currently refreshes every 10 seconds, passing (page number +1) until it reaches the end (Page 329). Each page reads in 4 results, and we do include back and next buttons where applicable.
What we want to do is have the same features, but instead of an iFrame, include the results in a div with all the same functionality. I have been searching all night for a solution, but the only one I have found so-far will not support moving to the next page.
The reason behind wanting to change what we do is that the iFrame pagination is recorded in history, so a visitor hitting the browsers back button has to cycle all the way back through iFrame history before the page history.
Apologies if there is no easy solution. Code can be provided if required.
Any help much appreciated.
Okay, here's some sample code that should get you started.
You can leave most of your headerlatest.asp script as is but will need to make a few changes and add some JavaScript.
Remove the following line (which is what is reloading the page every 10 seconds). This will be replaced by an AJAX call.
<meta http-equiv="refresh" content="10;url=?Page=65&L=EN"/>
Give your previous and next buttons IDs:
<a id="prev" href="?L=EN&Page=63" style="text-decoration: none"><img src="images/prevframe.png" border="0"></a>
<a id="next" href="?L=EN&Page=65" style="text-decoration: none"><img src="images/nextframe.png" border="0"></a>
Give the DIV around the TABLE with the four columns an ID:
<div id="content" align="center">
Include jQuery on your page and add some JavaScript to handle the refreshing of content and previous/next buttons. You will probably need to make changes to this to suit your needs, such as the part that handles the maximum number of pages.
<script type="text/javascript">
$(function () {
var page = 1;
$(".prev").click(function () {
UpdatePage(-1);
return false;
});
$(".next").click(function () {
UpdatePage(1);
return false;
});
function UpdatePage(ctr) {
if (typeof ctr === "undefined") {
page = page + 1;
} else {
page = page + ctr;
}
if (page > 10) //maximum (if needed)
page = 1; //go to first
//if (page < 1) //minimum
// page = 10; //go to maximum
if (page == 1) {
$("#prev").hide();
setTimeout(UpdatePage, 1000 * 10);
return;
} else {
$("#prev").show();
}
$.ajax({
type: "GET",
url: "/myservice.asp", //this page needs to return the table content
data: "{'page':" + page + ",'L':'EN'}",
contentType: "text/html;",
cache: false,
success: function (content) {
$("#content").html(content);
setTimeout(UpdatePage, 1000 * 10);
},
error: function () {
alert("Error");
}
});
}
setTimeout(UpdatePage, 1000 * 10);
});
</script>
Lastly you need to create a second script called myservice.asp that has basically most of the code that headerlatest.asp has except it should only return the content inside of that <div align="center"> with the TABLE inside.
How it works: For the first call your page operates the same as it does now. But after 10 seconds the new content will be requested via AJAX and that will be injected into the content DIV. The previous and next buttons will then also use AJAX to request the appropriate content too.
Let me know how it goes or if you need any help.
Edit:
Don't hide your previous button on page 1 as you do now, instead set it to CSS display:none on page 1 only. The updated JavaScript will take care of the hiding and showing of the previous button now.
<a id="prev" href="?L=EN&Page=1" style="display:none;text-decoration: none"><img src="images/prevframe.png" border="0"></a>