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.
Related
I have a single page app in which the page is never unloaded. I am using the # in the url and using javascript to detect the hashchange and then updating the UI using JS and AJAX... and I do not want the forward and back buttons to make an extra request to the server.
Currently, the first time the user initially comes to the site, a server request is made (which is OK)
Processing by MyController#index as HTML
My goal is for this server request to only happen once during the users time at the site...every time they click on any other link, I just use the "#" in the url to prevent a new server request... so all my "a" tags look like something like this
<a href="#page1/
The issue I am having is that clicking the back and forward button triggers my JS hashchange listener (which is what I want)... but it also calls
Processing by MyController#index as HTML //I DO NOT WANT THIS TO HAPPEN
Here is the functionality I am currently getting
1.) user navigates to mydomain.com
2.) "Processing by MyController#index as HTML" is launched and a server request is made (THIS IS OK)
3.) User clicks a link and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
4.) User clicks a link and now the url reads mydomain.com/#page2 and I update the view with JS (THIS IS OK)
5.) User clicks BACK and now the url reads mydomain.com/#page1 and I update the view with JS (THIS IS OK)
6.) a server request is AUTOMATICALLY made to reload the page ("Processing by MyController#index as HTML" is called again) (THIS IS NOT OK)
How do I prevent step 6 from occuring when the user clicks the back button??... I just want the url to change and for me to update my UI via JS and no server request
Also, I am using ruby on rails if this helps at all.
What you're trying to do is impossible. You can't override the default behavior of browser buttons like back/forward/stop/refresh, etc.
What you could do is create your own Back and Forward buttons (and place them on the actual page, itself) - and code their event handlers accordingly to make your AJAX calls.
This work fine for me
jQuery hashchange event
Finally got it figured it out. For some reason, Turbolinks was causing it to reload the page whenever the back or forward button were clicked. I removed the Turbolinks gem from the app and now its all working perfect.
I am making a webpage which fetches query results from database.
The problem is whenever I reload page in Chorme, it redirects the page back to the home page instead of loading the same page again albeit it is redirecting correctly in FireFox and Safari.
For Example:
If the search URl is : http://bug.xyz.com/#/?bug_package=Demo&ndays=0
When I reload/refresh the page in chrome it takes me back to http://bug.xyz.com/ but I want it to reload the present URL only.
Language used: JavaScript
P.S. The link is for example purpose only and it will not work as the website is on intranet only.
My only thought is, what is the /#/ bit for. It may be what's causing your problem.
Otherwise you'll need to post some code.
I know there have been variations of this question asked a thousand times on stack overflow but none of them really relate to what I need to accomplish here.
I have a form that when submitted it adds a query string to the url after the page reloads. I simply would like to know a way to remove this query string from the browser url WITHOUT reloading the page.
Currently with what I have below, a user will submit the form and the page reloads and has query string in the browser url then the below will run but it reloads the page for a second time. How can I make it to where it won't reload 2 times but still strip the query string from the url?
window.location.href = window.location.href.split('?')[0];
Most browsers won't allow you to change the address programmatically without submitting the page. You could obfuscate it by using iframes on your page. The frame would then be loaded with content, but the URL would be that of the main page.
I think you are looking for:
window.history.replaceState
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).
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.