CODEWITHSUNDEEP
phpjavascriptajax
Naeem Ul Wahhab
Naeem Ul Wahhab

Reputation: 2495

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*/
if(XMLHttpRequestObject) 
{
var obj = document.getElementById(divID);
XMLHttpRequestObject.open("POST", dataSource);
XMLHttpRequestObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(PostData);
}
}

</script>

Body portion of Database Homepage/index.php: 

<h2>
Ajax Books Database
</h2>
<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" />
</form>
</div>

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

/*Opening Books Management System*/
if(isset($_REQUEST['open-bms']))
{
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>
</form>
.
.
//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!

Upvotes: 2

Views: 711

Answers (4)

Florian Margaine
Florian Margaine

Reputation: 60787

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.

Upvotes: 1

Kamall A Joshi
Kamall A Joshi

Reputation: 1298

I could suggest to use method of history.pushState(stateObj, "page 2", "bar.html");. When you click on a button, use above pushstate from where you can change url in browser but the page wont gets redirected and your ajax response will remain on page. Now when you'll refresh the page new url is there which will redirected your page to new one on which you can get your books management system. I suggest to go thru facebook. As we know facebook retrieves data using ajax. When you click on message tab,you'll get ajax response and your url should be like facebook.com/messages but you are still on that home page. When you refresh the page you'll be redirected to messages/index file from where message history is displayed again. I hope above explanation could help you and others.

Upvotes: 0

cur4so
cur4so

Reputation: 1820

One can redirect the output onsubmit to another page, so you'll be able to reload page and still see the same content. In

 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");}

one never gets to the 2d else if

else if (window.ActiveXObject)
{ XMLHttpRequestObject = new ActiveXObject("MSXML2.XMLHTTP");}

since it has the same condition as the 1st else if

Upvotes: 0

Nick
Nick

Reputation: 390

One possible way might be to save the ajax query in a cookie or session variable when it's first submitted. Then when the page is loaded check for that cookie/variable, and return the correct page data. (Don't forget to clear the cookie,variable)

Upvotes: 0

Related Questions