Ajax database browser page Refresh changes the page instead of refreshing it

I am facing a problem with my AJAX and PHP database. I bet many other new Ajax programmers would also be facing this problem. Although I have shortened the code but it is still somehow lengty, so please be patient. I have a button on the homepage index.php which when clicked, loads the Books Management System as it is Ajax database so the Books Management system is loaded on a div('mainDiv') on the same page. The problem is that when Books Management System is open whenever I refresh/reload the page(by clicking browsers Refresh button) it unexpectedly return to the homepage with button. On refresh the page contents should remain the same. But it never happens here. Doing it in Ajax makes it more complicated. Is there any simple/easy Ajax solution to it? Also kindly point out if something in this code is against good programming practises. Here is my code: ** script portion of Database Home page/index.php**

<script language="javascript">
function submitData(dataSource,divID,formId)
var PostData;//assuming the form's post data has been already serialized to keep the question simple
var dataSource;
/*setting up XMLHttpRequestObject*/
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) 
{   XMLHttpRequestObject = new XMLHttpRequest();}
else if (window.ActiveXObject) 
{ XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");}
else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");}
else {  alert ("XMLHttpRequestObject can not be created");}

/*processing sending of the form's post data*/
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;


Body portion of Database Homepage/index.php:

Ajax Books Database
<div id="mainDiv">
<form id="books-management-sys-targeting-form">
<input type="hidden" name="open-bms" value="open-jms" />
<input type="button" onclick="submitData('phpcontroller.php','mainDiv','books-management-sys-targeting-form')" value="Open Books Management System" />

When the Button on above home page is Clicked The PHP controller executes this code:

/*Opening Books Management System*/
include 'books-management-system.html.php';

Here is the books-management-system.html.php code:

//manage books categories link
<form id="to-manage-book-categories-form">
<input type="hidden" name="manage-book-categories" value="manage-book-categories" />
<a href="#" onclick="submitData('phpcontroller.php','mainDiv','to-manage-book-categories-form','personalform.txt')" >Manage Books Categories</a>
//other tasks related to managing books

What changes I have to make in this code so as when I refresh it, it should display the same presently opened page/contents,not the main page. Is there an easy way to do it in Ajax? Please Help!


You asked for some best practices? There they are :

  • Don't use onclick HTML attributes. Instead, use addEventListener() or some cross-browser variance (this is where jQuery comes in handy). This is why it's better to not use onclick html attributes : http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
  • Correctly indent your code. It is almost unreadable right now
  • Store your XMLHttpRequest object into a variable. It is hard to read with such long variable names. Look at this tutorial to see how clean the code can be.

About your solution, as Nick said, I'd use a cookie :). When you process your request's answer in javascript, add a cookie. On the server side, check if the cookie exists, and act accordingly.

Kamal's solution seems overkill to me. Besides, his solution is not supported by all browsers.

Need Your Help

Shell problems when running scripts in Ubuntu as new user

python linux shell ubuntu dos

When I log into a particular Ubuntu Linux (10.04 64bit) host via SSH, I get a bash shell. From here I am able to run a particular Python script, with the executable bit set, that has this as the fi...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.