problem with refreshing:(

shemi · #1 (**permalink**) 10-05-09, 06:47 AM

in my site, i have an index page, it has a main div. this main div's content is changing according to the menu click as home, products etc. div is populating itz contents with html pages for these home, products n projects etc.
header part remains still. when user clicks on products, div is filled with product page. bt problem is , while refreshing the page, i am not getting the products page refrshed. it is going to the index page. what should i do for avoiding that.
m posting my code here

HTML Code:

<head>
 <script> 
function loadNewPage(temp) {
var req = new XMLHttpRequest();
req.open("GET", temp, false);
req.send(null);
var page = req.responseText;
document.getElementById("main").innerHTML = page;

}
</script>
</head>
<body>
<div style="position:absolute; left: 119px; top: 129px; width: 782px; height: 39px;"> 
  <ul class="menu">
<li class="top"><a href="" onclick="loadNewPage('home.php'); return false;" class="top_link"> Home </a>
</li>
<li class="top"><a href=""  onclick="loadNewPage('makeuser1.php'); return false;" target="_self" class="top_link"><span>Registration </span></a>
</li>
<li class="top"><a href="" onclick="loadNewPage('news.php'); return false;" target="_self" class="top_link"> <span>News</span> </a>
</li>
<li class="top"><a href=""  onclick="loadNewPage('complaints.php'); return false;" target="_self" class="top_link"> <span>Complaints </span></a>
</li>
<li class="top"><a href="" onclick="loadNewPage('videos.php'); return false;" target="_self" class="top_link"> <span>Videos</span> </a>
</li>
<li class="top"><a href=""  onclick="loadNewPage('downloads.php'); return false;" target="_self" class="top_link"><span>Downloads</span> </a>
</li>
<li class="top"><a href="" onclick="loadNewPage('about us.php'); return false;" target="_self" class="top_link"><span> About us </span></a>
</li>
<li class="top"><a href="" onclick="loadNewPage('contacts.php'); return false;"  target="_self" class="top_link"> Contact us </a>
</li>
</ul></div>
<div style="position:absolute; left: -1px; top: 164px; height: 1031px; width: 1020px; background-color:#F5F5F5; " id="main"> 
</div>
</body>

BurkeFour · #2 (**permalink**) 10-30-09, 11:05 AM

I'm guessing from what you describe, that you are not maintaining the state of the last-clicked item. In other words, the user requests the Home page of your app. Then they click on "Products", where you do a partial-page update to replace some of the HTML on the Home page with product information. As far as the browser is concerned, it's still on the home page. If you refresh that page, it will re-request it from the server, which re-initializes it to its default state (Home page). If you want to retain the state between refreshes, you have to utilize some state management. For example, you could use "hash navigation" where you navigate the page to a named anchor when changing to a different state. Then when you refresh, the page could special code to react differently based on the selected anchor (bookmark). Many JS frameworks have this out of the box. You can also look at doing cookies, etc. However, in general I would seriously consider changing your architecture here...this is sort of a convoluted way to build a website, unless you're just doing it this way to play with AJAX. If you do want to go this way, maybe try using an AJAX framework instead of manually coding against XMLHTTP...it would save you some hassle.