My checkout cart displays (1) an animation for "Processing Order..." after the 's been (2) submitted and the card is being processed in a php script. However, there's a bug triggered when the user has reached the "order accepted" page, and pressed the back button. The "Processing Order..." animation is still displayed.
(1) The processing display is shown like:
<div style="position:absolute;display:none;" id="animation">
<img src="animation.gif"/>
</div>
(2) When the button is submitted, the javascript used:
onClick="document.getElementById('animation').style.display='block';
document.the_form.submit();"
So, the button is clicked, the animation displayed, the form submitted, and the card is processed, and the user is on a new page.
When the user clicks back, we should expect a page without the animation. But, onLoad isn't triggered, and the last state of the animation (displayed) is saved.
Any idea how to remove the animation when the user returns to the page?
Inspired by Adam A's comment, you could hide the animation when the user is leaving the page (through form submit is the normal route, I would suspect) so if/when coming back to the page, the animation isn't shown.
One way to achieve this is adding the hiding code to HTML body's onunload event.
<body onunload="document.getElementById('animation').style.display='none';">
In most modern browsers, clicking back doesn't reload the page, it just displays it from memory as it last remembered it (as this is likely to be the desired behaviour).
In my limited experience of UI design, I'm not sure why you would want users to click the 'back' button after submitting an order, instead you should provide a link that takes them forward to the next task they may wish to complete, or, forward them onto a new page that has useful tasks and simply displays a message somewhere that says "Thanks, your order is accepted".
Related
I have a form in Access 2013 that uses a button to jump to another form.
However when the button is clicked certain requirements have to be met in order for the jump process to actually be executed. If the requirements are not met the user is forced to stay on the current form (with the button).
When this happens the button stays in the clicked (i.e. pressed down) state on the form, making it look like it's being constantly pressed.
(Note: If the button is clicked again and the requirements again aren't met it pops back out...)
Is there any way to change the appearance of the button back to the unclicked appearance after every click when the user is forced to stay on the current form?
Many thanks in advance for any kind of help!
A regular button can stay depressed for a short while, while its _Click() event procedure is running.
But once that finishes, it always returns to its normal state.
So the assumption was, that a toggle button was used instead, which turned out to be correct.
I am using Sitecore and I have a header sublayout that I use in all pages. This layout contains a Logout button that fires OnClick event when clicked and executes the onclick event function. But in few pages it wont fire OnClick event at all instead it reloads the page.
Below is the code for the logout button
<asp:button id="btnLogout" runat="server" borderstyle="None" onclick="btnLogout_Click" text="Log out" ToolTip="Log out" backcolor="Transparent" style="cursor:pointer" class="logout_new"></asp:button>
Below is the code for the event function
protected void btnLogout_Click(object sender, EventArgs e)
{
Sitecore.Security.Authentication.AuthenticationManager.Logout();
Response.Redirect("/Login.aspx");
}
I found out that the difference between the pages where the logout fires the onclick event and pages where it does'nt is that they use the same header sublayout containing the logout button but they use different content sublayout though.
Note: I have not applied Cache to any sublayout.
Can anyone help me with this?
From the given context I don’t know what is the issue but here is what I will do if I have issue like this.
As you said only on few pages it is not working, it could be the other controls on that particular page is causing the issue.
I will pick two pages which has less controls on the presentation layer. Say PageA is a working page and PageB is a non-working page. Then I compare PageA and PageB and remove all common controls, this should narrow down the number of the controls on the presentation layer. Now check again to see if Page B is working or not. If not, I will try to remove one control at a time on PageB untill it starts working. If you find by removing certain control and the page started working then you can look into the particular control and identify the issue.
I hope this helps.
try disabling the cache as it would return the html without triggering the back end code.
To do so, one option is going to the presentation detail of those pages, find the control and click on it to edit. Under the "Caching section" uncheck "Cacheable" and publish the item. If this fixes your problem, I'd review the standard values of the template, to apply the change to all the items with the same template
This behavior happens to me at annoying times too, but it's almost always the same thing: the Sitecore sublayout the code is in is being cached.
The onclick javascript fires, but the page is not re-rendered with new content because the "unclicked" version is stored in the cache.
You'll need to disable caching on the sublayout to make the button work.
This can, however, be somewhat annoying if you're trying to cache as much presentation stuff as you can. In those cases, it often means you need to, counter-intuitively, create a number of "sub-sublayouts" and place them statically. Set the containing sublayout to be uncached, and then you can set each smaller one's caching appropriately (caching static parts, not caching dynamic stuff).
The problem was in the content sublayout in which it was not working, the Page_Load function was calling a Response.Redirect function to itself and it was not checking if it was a post back request or not before that. So Whenever a user clicked logout button it used to post it back to the server and the page used to reload instead of executing the onclick event.
I noticed that in the other content sublayout where it was working, it was checking if it was a post back or not.
I added a if(!IsPostBack) before that and it started working.
I am creating a webpage and am having some issues with how the back button works on the page. I am guessing that I need to set some headers, but don't know which ones or how. This is what I'm seeing:
(1) Go to the main page, which shows forum threads.
(2) Click a link to go to a page showing a thread. On this page, scroll down and add a comment.
(3) Comment is saved via form (edit: I have tried both POST and GET form). The same thread page is now reloaded via a redirect. The comment shows.
In Chrome: pressing the back button at this point still shows the comment as having been added. It looks as though the back button didn't work. However, the page is scrolled down as it was for (2). Clicking the back button again shows the main page. So, the back button does take me back, but if the same page is there twice, it shows the new data both times.
In IE9: pressing the back button displays "Webpage has expired". Clicking it again takes me to the main page.
How do I alter this behavior so the back button truly shows me the previous page?
(The reason I'm doing this is that I keep track of how many pages I am from the main page so I can generate a "back to main page" link. (2) above has history.go(-1) and (3) above has history.go(-2). This won't work if the user presses the browser back button from (3) since it will now be 1 away from the main page, but show the link from (3).
In step (3) you probably have a POST that returns the new HTML of the thread page. Instead the POST should redirect to a GET of the thread page.
See http://en.wikipedia.org/wiki/Post/Redirect/Get
BACKGROUND:
When you have a page that includes an HTML form, and you refresh/reload the page or use the back button, Firefox is kind enough to repopulate your inputs with what was entered before you navigated away.
PROBLEM:
For some use-cases, this is not the desired functionality. Fortunately, there are ways around this behavior if you are willing to use one of the "redraw without caching" options below:
redraw without caching ;; Press CTRL+F5
redraw without caching ;; Press form "Reset" button while holding SHIFT
redraw without caching ;; Cut the address from the address bar, Paste it back into the address bar, press ENTER
redraw with caching ;; Press F5
The problem is, not all users know these options, and some just want a simple "Reset" button that they can click on with the mouse without having to use the keyboard.
QUESTION:
Is there a way to get Firefox to do a "redraw without caching" in a way that lets the user simply click on a button with the mouse, and not have to use the keyboard?
For the sake of completeness:
<script>
document.FORMNAME.reset()
</script>
It resets the form with the name FORMNAME on every reload of the page.
Method 1:
Holding Shift + clicking the Refresh button will do a refresh without cache. This isn't a mouse only, but this is the closest I can think of while using the mouse.
Method 2:
If you really want to use no mouse, on a Mac, you can drag and hold the favicon off the URL bar, then drag and drop it back into the URL bar. Can't confirm on Windows, and this just seems more confusing than holding Shift.
Method 3: Install Hard Refresh add-on, which installs ability in context menu.
How about a link to the same URL that the user is currently on?
Since the browser treats it as a navigation, rather than a refresh/reload, the form data won't be remembered.
Note that "reset" is a different term used specifically for reverting forms to their original state without reloading the page, as in <input type="reset">, don't confuse it with refresh/reload which are terms for getting a page to be requested again from the server
Say if I am on page 1 , I enter my form data and go to page 2 , But wait I forgot something and I need to go back. FireFox and Safari ask me if I want to resend my form data.
But IE being IE it just goes back and does not show the page.
Is there away around this when I click back it keeps the data and the page appears.
Sorry I cannot give a link but the process for u to go through on my site to get to this part would take you a while.
My suspicion is that your talking about a wizard form. Where each part of the form is a page and you can go backwards and forwards through the pages.
the back button has always caused problems for developers on the web and this is probably the most annoying.
You can stop the IE back button issue by redirecting on the server to the next page when you receive a form post rather than just delivering the form back to the browser. Doing this means that the browser considers each page to have been a get and stops asking you if you want to resubmit the form.
to do this simply make each form post to itself and then return a redirect to the next page of the wizard. I'd give examples but I'm not sure what language you are using on the server.
the other alternative is to use javascript to create a wizard from your form see this jQuery wizard form demo.
create a new back button besides the submit button and when a user clicks on either one you call a javascript function which modifies the form action either to the next page or the previous page.