View Full Version : Dynamic Ajax Content - after refresh

09-04-2012, 03:44 AM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem: after refresh, page loaded through AJAX disappear. Is there a way I can retain the latest loaded page?


I also tried something from here : http://www.dynamicdrive.com/forums/showthread.php?11279-Dynamic-Ajax-Content-refresh

both does not work... What happens is I got stuck on the latest loaded page.

Thank you in advance.

09-07-2012, 05:10 AM
If you only have one DIV container on the page that's loading Ajax content into, getting the script to recall the last viewed content automatically when the page loads is very simple. Take a look at the following code, with the changes to the default script highlighted in red:

<script type="text/javascript">

* Dynamic Ajax Content- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
catch (e){
page_request = new ActiveXObject("Microsoft.XMLHTTP")
catch (e){}
return false
document.cookie = "lastloadedfile=" + url
loadpage(page_request, containerid)
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))

function loadobjs(){
if (!document.getElementById)
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref.setAttribute("src", file);
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
if (fileref!=""){
loadedobjects+=file+" " //Remember this object as being already added to page

var lastloadedfile = (function(name){
var re=new RegExp(name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
}) ('lastloadedfile')

if (window.addEventListener && lastloadedfile)
window.addEventListener('load', function(){ajaxpage(lastloadedfile, 'contentarea');}, false)
else if (window.attachEvent && lastloadedfile)
window.attachEvent('onload', function(){ajaxpage(lastloadedfile, 'contentarea');})



<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a> | <a href="javascript:ajaxpage('test2.htm', 'contentarea');">test</a>
<div id="contentarea"></div>


<a href="javascript:ajaxpage('test.htm', 'contentarea');">test</a> | <a href="javascript:ajaxpage('test2.htm', 'contentarea');">test 2</a>
<div id="contentarea"></div>

The above code assumes your DIV Ajax container has an ID of "contentarea"; if not, inside the code in red, change the words "contentarea" to the actual DIV ID. With the above changes, clicking on "test1" to load test.htm then reloading the page will automatically recall "test.htm", populated inside the "contentarea" DIV. Same with the "test2" link.