CODEWITHSUNDEEP
javascriptajaxhtmlweb-applications
Gowtham
Gowtham

Reputation: 386

Handling user navigation with AJAX

I have a simple one page webapp that follows the the following flow of execution

Main -> AJAX Content -> Main

The user starts with the main screen, enters some input data and presses a button. This starts the AJAX content which is essentially a collection several different steps in a sequential manner. After completing all the steps, the user starts back on the main screen.

I want to handle what happens when the user presses the back button in the "AJAX Content" state. This is the state diagram I wanted-

Main (Push Main) -> AJAX Content (Pop Main)->  Main

So, when the user is in AJAX state, on back button press, user will be taken back to main screen. After completing the activity and returning to the main screen, the back button takes the user away from the site.

NOTE: All the items are just a single HTML page. I used the words "Main" and "AJAX Content" to illustrate the different screens that the user will see.

I tried implementing this functionality using Really Simple History, PathJS and jQuery BBQ. None of them was successful. I need a simple way to push and pop items onto the navigation stack and react to them when the user uses the back button.

I mostly develop for mobile platforms, where doing all this is really easy. I can't figure out how to do this for a web app. Snippets of code will be highly appreciated.

Upvotes: 0

Views: 123

Answers (1)

Damyan Petev
Damyan Petev

Reputation: 1635

Would manually pushing history work for you? Something in the likes of:

window.history.pushState(stateObj, "Title", "URL");

It also supports some methods for navigation and the thing you should appreciate the most:

window.onpopstate = eventHandlerRef;

There's a very nice article right here: https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Now this is all good but somewhat dependent on your target platforms sadly - The support for the pushState method and the event is not too broad - http://caniuse.com/#feat=history - and both sites link to the History.js polyfill which has support pretty much covered. From https://github.com/browserstate/history.js :

HTML5 Browsers

Firefox 4+ Chrome 8+ Opera 11.5 Safari 5.0+ Safari iOS 4.3+

HTML4 Browsers

IE 6, 7, 8, 9 Firefox 3 Opera 10, 11.0 Safari 4 Safari iOS 4.2, 4.1, 4.0, 3.2

Upvotes: 2

Related Questions