How browser back button works ajax

[greeshmarajs]

I just want to go back to the page where i come from...in simple web pages without giving any additional function calls, by clicking on the browser back button it will navigate to the previous page...but when we are using ajax to load a division of the web page, the page url remains the same..it wont change....by click on the browser back button nothing will happen....then how will i go back to the previous state?

 

Here am using different function calls for different anchor link like this:

<a href="#inbox" onclick="javascript:view_inbox('inbox');">Inbox</a>

<a href="#sentitems" onclick="javascript:view_sent('sentitems');">Sent Items</a>

 

The functions view_inbox() and view_sent() leads to different php pages with different number of arguments

 

myAjax.open("GET","admin_mail.php?src="+src,true);

myAjax.send(null);

 

In that case how the javascript part works when we click the back button?

 

[XeNoMoRpH1030]

I can say I have never seen a website work the way that you want, until I searched for it of course.

 

There are several examples. I just searched for "ajax back button" and found multiple results.

[F1Fan]

I had this same problem, and I found a solution that works for Firefox and IE, but I have yet to find a Web-kit (Safari, Chrome) solution, mainly because it hasn't been a priority. If anyone can expand on my idea to work with Webkit browsers, I'm all ears.

 

 

Here's how it works:

 

Every time an Ajax call is made, JavaScript replaces the URL with a URL that is exactly the same, except for some variables that I am passing. The variables are ONLY passed to the RIGHT a #, which will not reload the browser. If you change anything to the left of the #, it will reload the whole page, which you obviously don't want. This is how that particular Ajax state can be "saved" to the URL. Then, each time this is changed by your JS function, you'll want to save that URL in a JS variable for use later.

 

The second part of this is to then retrieve the URL state. You'll probably want to do this in two ways. The first way will be when the page loads. That way, if someone bookmarks the page with a # and a bunch of variables, they will get the desired page when they access that bookmark. The second way would be a JavaScript setInterval or setTimeout loop that periodically checks to see if the URL is different than the URL you previously saved in the JS variable from the first step. If it is different, that means the user either clicked the browser's back button, or they accessed that bookmark. I've found that a setInterval/setTimeout time of one second is the best compromise between there not being too much delay and also having very little effect on the user's CPU usage.

 

Here's a brief example of the JS to replace the URL:

top.location = "index.php#variableOne=something&variableTwo=somethingElse";
previousURL = top.location;

Here's a function to extract those variables:

	function getURLString(){
	var href = window.location.href;
	var position = href.indexOf('#');
	if (position==-1){
		position = href.indexOf('?');
	}
	if (position>0){
		position++;
		return href.slice(position);
	}
	else{
		return "";
	}
}

Then parse them out, separating them out with the & character, then extracting the variable name and value with =.

Finally, the function that looks for updates:

	function checkForURLUpdates(){
	var currentLocation = window.location.href;
	if (previousURL != currentLocation){
		// do stuff
	}
	setTimeout("checkForFeatureActionUpdates()",1000);
}

 

 

Hope this at least gives you ideas.

[greeshmarajs]

Thank you F1Fan for your reply.

I got the idea that you meant by the code snippets. But  I am a little confused that from where the  getURLString() and checkForURLUpdates() functions call from? Here you mention about only one  function, checkForFeatureActionUpdates() for repetative call. In my javascript page I have defined a number of functions like drafts(src,mail_id,to,subj,mes), uploading(src,attach). How that is possible? How we can call different functions on browser back button click? How can we define checkForFeatureActionUpdates() function?

[F1Fan]

Sorry, I had to change/remove quite a bit to make it generically usable, and in doing so forgot to change a few things and mention a few things.

 

The getURLString() function will extract the variable string after the page. For example, if the URL was index.php#variableOne=something&variableTwo=somethingElse, this function will return variableOne=something&variableTwo=somethingElse. Using that, you should be able to extract those variables and their values.

 

As for the checkForURLUpdates() function, and the reference to the checkForFeatureActionUpdates() function, that should have been like this:

   function checkForURLUpdates(){
      var currentLocation = window.location.href;
      if (previousURL != currentLocation){
         // do stuff
      }
      setTimeout("checkForURLUpdates()",1000);
   }

Then, the checkForURLUpdates() function should be called when the page initially loads.

 

 

Finally, I'll explain better how they all relate to each other.

 

First, the checkForURLUpdates() function should be called on page load. That will set off the chain reaction that will catch the URL changes. You'll want to put whatever functions you want to occur when the URL has changed where I put "// do stuff." You'll have to write new custom functions here. You'll also use the getURLString() function to extract those variables and use your Ajax stuff to direct the user to the desired page.

 

Second, whenever you change something with your Ajax calls, you'll need to update the URL with the new variables with this piece of code:

top.location = "index.php#variableOne=something&variableTwo=somethingElse";
previousURL = top.location;

 

 

So, let's cover an example. Let's say the initial page is "index.php" and the user hasn't done anything. But, you have an Ajax call on page load, and that changes the URL to something like "index.php#stage=1." Then the user does something that makes another Ajax call. That changes the URL to "index.php#stage=2." One more time and the URL becomes "index.php#stage=3." Each time Ajax is called, you update both the actual URL and the global JavaScript variable "previousURL" to the new URL. Meanwhile, the checkForURLUpdates() function is constantly comparing the actual URL to that previousURL variable. That function isn't doing anything yet, because those two match. But, then the user clicks the back button. That changes the URL from "index.php#stage=3" to "index.php#stage=2," while the previousURL still equals "index.php#stage=3." This is where the checkForURLUpdates() function catches that difference and goes to work. At this point, your code will need to know what to do when the URL variable string is "stage=2" and act appropriately to give the user the page that matches stage 2.

 

Does that help?

[greeshmarajs]

sorry for late reply

i tried it out..but it is working only for the first link, whatever we click

[F1Fan]

You'll have to do some bread-crumbing to follow the steps of the user so if they try to navigate backwards, you can retrace their steps.

[greeshmarajs]

Thank you F1Fan.

I will try to work with bread-crumbs...hope for the best.