I am writing a web application which retrieves a lot of data using AJAX which substantially modifies the loaded page depending on what button the user clicked (Let's say that clicking on button1 takes the page from state0 to state1 and so on..)
Further, if the button number is passed to the server as a GET variable, the server returns the page in the correct state.
Needless to say, the back / forward browser buttons do not work because the URL is not changed during state changes accomplished through AJAX.
So, my question is, how can I make the browser back / forward buttons work?
Is it possible to supply the browser with the correct URL every time the state changes; but stop the page from reloading?
Please note that this question is only about browser back / forward buttons. I can create custom back / forward buttons but that is not what I want to do.
Take some time to go through some. of. the. previous. questions. on. this. topic.
Hint: use the hash man! (window.location.hash that is)
You will have to use # capabilities of your URL to store your intermediate Ajax requests in browser history. If you use any Javascript library there will probably be a solution in the library itself or in a form of a community extension/plugin.
For instance there's a plugin for jQuery here.
Google for browser history ajax
Related
I have a react app. I need to send a user to fill a form(s) on an external page (in another domain), and then get back with the result (success/fail) of the form submitted there, to continue the process in my react app.
I don't control the other domain or the app there (it is a 3rd party), but I can ask them to make changes (and maybe they will agree, if it is not too complex).
The external forms are not html only, trey have javascript in them as well (for example to autocomplete cities names, etc).
How can that be achieved?
I thought about few options:
Iframe + postMessage
Popup + postMessage
Redirecting, and asking them to change site so they will redirect back to me on form completed.
Asking them to make a special form just for me that I can embed inside my design.
Issue with 1,2,3 is that it will show the entire external page, which has not just the form, but also other links, so user can get "lost" and never come back.
Is there a simpler way to do that? The less I need to rely on them to make changes the better, and if I can avoid iframe/popup/redirecting and show the form inside my app is better
A site I am working on requires user information to be collected from a form when the user presses the submit button. The site will then take the information and plug it into a more robust form on a different page, so the user does not have to retype the information twice.
Is this possible using javascript?
Any help appreciated.
Once the user leaves the current page, the JavaScript on the original page is no longer running, They will load up the other page and run that page's JavaScript.
Do you have ownership of both pages?
If so, then you can leverage the form GET to pass information across pages, so the next page will have a Query string, and JavaScript can parse that.
Another way to move data from one page to another is to use Cookies. So it really depends on how much data you want to move around.
But I highly recommend that you leverage the server-side technology to handle the form GET or POST and carry information across pages.
This completely depends on the OTHER site. You can have a form with the same field names and post it to the same URL the other site's form uses.
BUT - if that site checks to see where the original post came from, it may block you out.
I need a stateless way to implement the back button feature in an ajax forum such that if a user is on page 2 of the topics ajax page, and then clicks on the message - when the user then hits the back button they can go back to the point of the message on the topics ajax page. - your help would be much appreciated.
::Please remember I want a stateless way of doing this, such that it's done client side::
The only option you have is to implement a client-side routing mechanism which you can either achieve by changing the # in your url whenever you change state. For instance your topics page has a url like yourforum.html#topics and whenever a user clicks on a message, you redirect (client-side) to yourforum.html#message/3.
Your JavaScript code should listen to those hash changes and react accordingly by loading topics/messages.
There 2 ways of client-side routing:
changing the hash like in the example I made
HTML5 push-state
Many modern JavaScript frameworks like Backbone, JavaScriptMVC etc... support routing. So you might take a look at those. TodoMVC might be a good starting point. Otherwise try to google for some jQuery plugins which give you this kind of functionality.
I'm using jQuery with a Rails 3 backend and I have the following scenario:
User see's a comment on their post and wants to delete it
User clicks the delete button and deletes the comment from the database
jQuery uses remove() to remove the item from the DOM as an AJAX success response to step 2 above
User navigates to a different page
User hits the back button to go back to the page with the comment
The old comment is still there, even though it was removed from the server and from the DOM
The comment in this scenario is obviously being cached by the browser and so it shows up even though it was previously deleted (and it doesn't exist on the server either).
How do you prevent the comment (or prior cached objects that have been removed from the DOM) from showing up when the user hits the back button?
By the way: Please don't say, "don't cache any pages" :) That is not an option.
if you are using rails page cache then you should clear it on Create, Update and Delete actions. see link for more details
Answer One: If a user is uses a back button, they shouldn't be surprised when they see things from their past.
Answer Two: It's a little heavy handed, but you could try an ajax call in $(document).ready() that checks for outdated content. I'm not certain that would work. If not, you could set up an interval the ping to server to double check there's no outdated content on the screen. (I've had good performance with pings as frequent as 7 seconds)
I don't think there is a non-heavy handed way to do this (other than preventing caching ;)
I don't know whenever it depends on browser, and it may break your RESTful routes, but what you can do, is issue a PUT/POST to the same URL the post originated from, and in the AJAX response disable caching (using the Cache-Control header). It should invalidate this URL in the browser's cache, as browsers usually don't discriminate using HTTP verbs.
I have an ExtJS grid on a web page and I'd like to save some of its state information back to the server when the users leaves the page.
Can I do this with an Ajax request onUnload?
If not, what's a better solution?
You can use an Ajax request, but be sure to make it a synchronous request rather than an asychronous one. Alternatively, simply save state whenever the user makes a change, this also protects the data if the user's browser crashes.
There's an answer above that says to use a synchronous ajax call, and that is the best case scenario. The problem is that unload doesn't work everywhere. If you look here you'll find some tricks to help you get unload events in safari... You could also use Google Gears to save content user side for situations where the user will be coming back, but the only fully safe way to keep that information is to continuously send it as long as the user is on the page or making changes.
You could also set a cookie using javascript on unload. I think the advantage ajax has over cookies is that you have the data available to you for reporting and the user (if logged in) can utilise the data across different machines.
The disadvantage of using ajax is that it might slow down the actual closing of the browser window, which could be annoying if the server is slow to respond.
It depends on how the user leaves the page.
If there is a 'logoff' button in your GUI, you can trigger an ajax request when the user clicks on this button.
Otherwise I do not think it is a good idea to make a request in the onUnload. As said earlier you would have to make a synchronous request...
An alternative to the cookie solution would be an hidden text field. This is a technique usually used by tools such as RSH that deal with history issues that come with ajax.