This is how my flow works. User clicks on a link - "find", and is shown a page using ajax. I add to history using pushState. Then, the user clicks next to see results of page 2(using ajax), and I add again to push state. So, this works fine, when the user goes back. But, my issue is that say user is on page 2 of results, and clicks a regular link(i e no ajax call). He is taken to a new page, but when he clicks back, he is not taken to results page 2 but to the initial search page.
Is this normal behavior? Or can something be done?
Sounds like your search/result page is not properly updating its state when loaded. When you go back from "regular page", the "ajax page" is reloaded and thus loses its state. You must manually restore the state (e.g. read the url and doing the corresponding ajax).
Related
I am creating a web application.
I have a landing page which the user sees after logging in.
From the landing page they can click a link to go to detail page.
The detail page loads data for the default id to start with. It also contains a drop down for user to pick a different id. When user presses submit button it makes a get request to the same page, but uses the optional argument id=someID this reloads the page and shows the data for the newly selected id. All of this is working correctly.
My question is, if user chooses a few different ids from the drop down and clicks submit to view their data, now if he wants to get back to landing he has to go back through each id that he viewed. I would like to know if it is possible to set it up so that when they press back button they will go directly to landing page no matter how many times they've chosen new id's to view data for.
Here is the flow I'd like to achieve:
/landing -> /detail -> /detail?id=1 -> /detail?id=2 -> [press back button] -> /landing
Have the requests on the details page pulled in via ajax. You have to do some refactoring so that on a successful request, the information it receives will repopulate like a content block, but this will allow the information on the details page to update without you actually navigating to a new page. Then it'll leave you the ability to press the back button to go back to the landing page.
If you're already using a way to catch the amount of id's requested:
<INPUT Type="button" id="back" VALUE="Back" onClick="history.go(-"number of id requests");return true;">
i am creating a page with back button in corner. if the page launched for first back button should hide. if user navigates through page back button should show.
i used the code
(window.history.length > 1)?$("#back").show():$("#back").hide();
but my problem is,
window.history.length is keeps increasing.
But my requirement is when there is no page to go back then back button should hide again. how to achieve that?
you have more problems. what if the user came from google? there would be window history already. What if a user went to your site, then went to google, then came back?
If it's just a nav system as described by #Marc B, it's easy, you know where the user came from and how to get back (don't use the history directly). But if it is a back button no matter what link the user clicks into your site... it gets more complicated. Due to privacy restrictions, you can't access the user's actual URL history (just the length) and you can't access whatever url they are navigating to if you use capture the window.unload event. So you're left with limited options.
One option would be to record the window location on every page load to an array that you keep in either local storage, or a cookie. Then you should use this array to manage your history state rather than relying on window.history. When the user clicks your back button, you just pop off the last url on your site they visited and navigate them there. Keep in mind the first page load will put an item into your history array, so depending on where you check to see if you should show or hide your history button, you'll compare the length of your history array to either 0 or 1.
I have a page where navigation is handled by hiding and showing preloaded divs when users click on links. But, the users think they've actually changed pages, so they click on their browser's "back" button trying to go back to the div that was previously hidden. But of course, they go back to the page from which they came.
What's the best way to handle this? 90% of the traffic is from a login page. Should I just sandwich a redirect page in between the two? How is this done? Can I just change the browser's back button behavior?
If you are already using jQuery, why not simply add a history manager like jq-bbq or the hashchange or history manager? (Or, if you want to really go all out, switch to a MVC JavaScript framework like Sammy.) That way, the back button will work as the user expects, rather than hacking around their expectations by blocking the back button or throwing in redirects. (Unless you have a good reason to, of course :-) )
If you use a browser history plugin like the jQuery UI one you end up changing the history so that the back button doesn't actually unload the page.
http://yoursite.com
-> User clicks something
-> new address bar reads http://yoursite.com/#/something
because of the hash mark when user goes back it goes back to http://yoursite.com which should inturn fire your show previous div function
read more about the available history manager plugins available for jQuery. There are quite a few. Most if not all provide available callback functions that you can specify.
On change of the state of your page, write a unique set of parameters to the hash of your URL. You can change this via JS without causing the page to reload.
Set a timer on the page that checks the current location hash repeatedly, and if it changes (i.e. the user presses the Back button) then update the state of your page to match the URL.
I have this scheme working to great effect in a local application.
The jQuery Address library is another great alternative.
http://www.asual.com/jquery/address/
You can set the URL for different application states, and get the URL 'parameters' when the page reloads.
Two ideas:
1) onbeforeunload. Ask the user if they want to really go back.
2) Sandwidch a redirect page. Login -> redirect -> your page. A single back click would take the user to your redirect page.
The second is kind of a pain in the neck for people who know what they're doing though. I think the Back button (and all standard navigational elements) should be messed with as little as possible.
I would go with onbeforeunload:
function sure()
{
event.returnValue = "sure?";
}
...
<BODY onbeforeunload="sure()">
I have an AJAXed page, but I also offer a query string to the user so that he/she may type in the query string to the url to see the same page again. (Think google maps and its "share link" feature).
When the AJAX request occurs I update the query string presented to the user, but the actual URL does not change. The problem is, if a user refreshes the page, all the DOM elements created from AJAX disappear.
What I want to do is have javascript capture the refresh event, and instead of refreshing the page, redirect the user to the page plus the query string.
ie if query string is: ?data=blah&stuff=bleh
then instead of refreshing page back to www.example.com, refreshing would lead the user to www.example.com/?data=blah&stuff=bleh
You can't change the querystring...without the browser actually leaving the page and fetching a new one (kind of killing the point of AJAX).
You can go to a hash though, like this: www.example.com/#data=blah&stuff=bleh
In your script just set the window.location.hash, e.g.:
window.location.hash = "data=blah$stuff=bleh";
When your page loads, you'll need to actually use the hash...for example: using it as the data parameter to do the same AJAX call you made before.
How do I insert an entry into browsing history so back button goes to different page 1st click then original page on 2nd click?
So if you need a good explanation of what I want done, go to:
https://secure.exitjunction.com/howitworks.jsp
I just need a script that will allow me to insert an entry in the browsing history so when back button is hit, the user will be taken to my special page.
Here is a link to a jQuery Plugin:
jQuery Plugin
You can't directly manipulate the browsing history.
Such a feature would be seen as a security hole (and it would be), so I doubt that any browsers would ever implement it.
You might be able to hack around it however by doing something like this:
NOTE: This entirely hinges around the assumption that the referrer will get changed by the back button. I don't think this actually happens, so it more than likely won't work, but hey.
You have two pages, PageA and PageB.
The user hits PageA
The page (on the client, using javascript) checks the HTTP referrer, and if it is not PageB, then it immediately redirects the user to PageB.
Now that you're on PageB, if the user clicks the back button, it will go back to PageA.
PageA will check the referrer, it willmay be PageB, so there is no redirect.