I am working on a existing MVC4 project where we use to switch between screens using jQuery AJAX html() function. Ideally, the URL needs to be changed on every action so that the user can use the Back button (browser) to go back, but we are not changing the URL.
Ex:
http://mywebsite/bank/verify - link used to show login screen, lists the accounts and then their transactions step by step. When the user refreshes the page, the actions starts from login again which I want to avoid.
Thanks in advance.
Related
I'm working on the Slack bot using js and trying to have the home tab rerender anytime I use a model to execute an action. To notice a new change in the home tab, I must refresh the page. For instance, if I use the modal to alter or remove a block after submitting the model, the changes won't show up right away; I'll need to refresh the page to see them.
I've been looking for this answer for days, but I haven't come up with anything that will work.
I have an app that does payment. I want to show a processing page after the user clicks the "pay" button, and then render the payment result after the payment call has finished.
If the user clicks the back button while on the payment result page, they should go back to the payment page.
The problem is if I just push the processing page into the browser history, when the user clicks the back button, they're taken back to the processing page.
I also tried replace(processingPage), but the result isn't what I want: it replaces the /payment in the browser with /processing. What I need is not having /processing in the browser history.
Is there any way to achieve this behavior with React?
Update 1
This is not my code.
An alternative is to render a processing-component on top of the payment page, but that would require lots of code changes.
I just wonder if it's possible to do the above with React router.
Try doing replace(paymentComplete) from the processing page.
Alternatively put the processing screen in a modal and don't make it a route at all.
HI i have a ExtJS code on the front end. the drop downs on this page are loaded dynamically thru web-service call to 3rd party service. i have navigated from this page to the results page.
Now in results page i have a button which allows the user to go back to previous page. but all the data in the drop down should be retained.
i tried window.history.go(-1) and history.back()
Guys please help me.
If the navigation page is under different url than result page then it's not possible. You probably should save state of that menu for example in cookies, or in session on server so you could restore that state for each client. Also HTML5 client-side storage is an option.
Another possibility is to change the way result page loads, so you won't need reload page to go back (for example use AJAX).
I am using now extjs4 mvc design. We have a single html page, multiple views, a model and a controller.
On navigating to a new view, you need to hide the previous panels and when going back show the previous panel. This solved my problem of navigating and retaining view.
As above this is not suitable for mvc if you use it for multiple apps and older design where we use onReady().
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 am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites