0

I need to write a jQuery wizard which will have the use of Accordion. It will include 4 steps. Everything is ok but there is a requirement which is asking that "If the user closes the browser and loses their place in the wizard in the fourth step, they could be able to return to the wizard and navigate directly to the fourth step by clicking on the ‘Step 4’ accordion". What I understand is that when the browser is closed, the user can be able to land to the last 4th step as and when he re-opens the browser. How it is possible in jQuery or javascript because according to me when the browser will reopen, the DOM will be generated from the beginning and all the things will be loaded from start as well... Can anyone help me out in this as this seems critical. Any help would be deeply appreciated.......

abhijeet kumar
  • 75
  • 4

2 Answers2

0

Actually yes this can be done. You can have a hash tag change in the URL to designate where you are in the wizard.

wwww.example.com/mywizard.html#hashtag

This can also have a json object to store a lot of data The encodeURI function takes a string formated for a URL and JSON.stringify will take an object and turn it into JSON code: (This should be done every time you need to update the state of the app.

var wizardData = {"MyProperty":"MyValue"};
var myhash = encodeURI(JSON.stringify(wizardData));
location.hash = myhash;

Giving you a URL something like this:

wwww.example.com/#%7B%22MyProperty%22:%22MyValue%22%7D

To get the object back out you use the location.hash again: You will have to decode the URL and then turn it back into a Javascript Object. (This will probably be done when the page loads and on the window.onhashchange event.

document.onload = window.onhashchange = function() {
 var myhash = location.hash;
 //The hash always has the "#" in front, so we need to remove that.
 myhash = myhash.substr(1);
 var wizardData = JSON.parse(decodeURI(myhash));
 //Change the app to reflect the changes to the data
}

The page does not reload when it changes. You will probably not need to have any other logic to update the gui if you map all of the wizard information this way. If you do want to update your gui manually, then remove the part where it sets the window.onhashchange.

duckbrain
  • 1,219
  • 1
  • 13
  • 26
  • hey Duckbrain, can you please explain a bit more, as I m not getting exactly what you told. – abhijeet kumar May 30 '13 at 06:08
  • I don't see how this will work. My understanding of the question is that the location in the wizard needs to be saved even when the entire browser has been closed. No amount of JavaScript alone will do this. There need sto be some kind of persistent storage like cookies or local storage. – Jude Osborn Jun 03 '13 at 06:03
0

You can't accomplish this with JQuery/JavaScript alone. You'll need to consider a persistent solution like cookies. As the user progresses through the wizard you'll need to save the current position to a cookie. When the user returns to your website simply read the cookie and render the appropriate wizard page and/or elements.

See this post about working with cookies in JavaScript:

How do I set/unset cookie with jQuery?

Community
  • 1
  • 1
Jude Osborn
  • 1,788
  • 16
  • 24
  • Thanks Jude, actually I was also in hope of using the cookies option but was not clear. I will try with this stuff. – abhijeet kumar May 30 '13 at 06:07
  • It should be fairly simple then. All you really have to do is save the current wizard position to a cookie. For example, $.cookie('currentPos', 3); to save the current position to a cookie variable called "currentPos. Then when you return to the page just check the cookie for a position like this: $.cookie('currentPos'). – Jude Osborn Jun 03 '13 at 06:06