I am new and apologies if i asked age old question. I have a problem with an asp.net web application, as follows:
Problem:
On Page 1 i need to enter details and click next button to go to Page 2
If i had any validation error(s), i clear them and then click next button
On Page 2 if i click BROWSER BACK button, i would expect to see corrected details on page 1 but it loads the Page 1 WITH VALIDATION ERRORS.
More information:
The aspx of Page 1 alread has meta tags with expire set to -1 and 'no-cache' set for both cache-control and pragma properties.
On IE 8, i get 'page expired' page but on firefox 8, it automatically refreshes the page instead of showing 'page expired' page.
The issue seems to be there even on IE, when i try to refresh the page manually, i could see the old validation errors similar to FIrefox behavior.
Out of curiosity i entered improper details on page 1 in such a way i am hampered by validation errors 3 times. Then i correct details and clicked next button to reach Page 2.
On page 2 on clicking browser back button, i will get the validation errors i recieved on THIRD TIME, or the latest version of page 1 with vlidation errors.
However browser back button works fine when there were no validation errors on previous page.
Sorry for writing so much info, just thought might give you more insight into the problem.
Sounds like you are trying to create a wizard-like process where you take the user through multiple steps (pages) before the end goal. If that is the case, the way I've handled that in the past is through the use of Panel tags. Add a Panel tag for each step in your process and add your form elements to each. You can also have a "Next" button to progress to the next step within each Panel. When the button is clicked, hide the current Panel and unhide the next. You can also apply validation logic to the button to prevent the user from advancing with bad input. At the end, you can redirect them to a different page for a "success" message or summary. If the success page was also another Panel on the page, the user would be able to resubmit the form by refreshing the page if not handled correctly.
We've done this a lot and have never run into validation issues like the kind you are describing. I hope this helps you a little.
Related
I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.
Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.
Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.
You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers
If I have a form, and don't click submit before hand, using standard javascript history.
<button onclick="history.go(-1);">Back </button>
will bring me back to the previous page. However, if I click submit, and error come out (validation).
the back button will bring me back to the same page (the page before the submit error happen).
How can I create a back button where it always bring to the previous page, regardless error of validation.
Thank you
Going by the actual history isn't a great way of doing what you want. What you see happening here, is of course expected behavior, since submitting the form over and over will just add the page with the form to the history over and over. And by design, for security reasons, there isn't a way to check arbitrarily far back to the last page the user was on on your site that wasn't the form.
Therefore, I think a solution in Cake would be better. If the user can only arrive on the page from one place, you could make the button just link back to that page, rather than depending on the history. Alternatively, I would store in session the page that the user came from originally, and be careful to not rewrite it as long as the user stays on the form, and then link to that on the back button.
I have a weird problem in javascript alerts in my application. On a button click, alert displaying with an ok button. For the second click , i am getting a sentence with a check box "Prevent this page from creating additional dialogs" .
I know this a feature of browser. But for all other sites this is displaying after 10th click. For my application this is coming for the second click .Please help.
The alert is coming as a result of ajax call.
if (result.message!=null && result.message!=''){
alert(result.message);
}
I found the problem coming only when the time between clicks is less than 4 seconds, Any opinion how to increase this .?
Most common browser implement such a feature in order to prevent alert spam. Use another notification method, for example an absolute positioned div.
The jQuery.UI dialog module could give you some ideas.
This is hard to sum up in the title. I'm using CodeIgniter with jQuery Mobile. I have a page(index.php) with a dropdown list which submits the form when clicked (onChange).
<select name="organiser_dropdown" onchange="this.form.submit()">
It works fine. So it brings me to the next page (view_events) with no problems. However, when I press the 'back' button on the mobile (Samsung Galaxy S Plus), and select an option from the dropdown list in index.php, the form submits, I go to the correct page (view_events) with the correct information, and then it brings me back to the page with the dropdown list.
There are no redirects and the code logic seems to be correct. When I test it in the desktop browser, everything works as normal.
I'm almost certain that the problem is that the phone is caching the page so when I click back to index.php, it doesn't reload the page, and somehow this is breaking it? I think it's caching because the page doesn't seem to take time to reload.
I have used a submit button instead of the onChange() function, and everything works as normal. That also indicates that it's an issue with caching.
I used jQuery to listen for the onChange event and to submit the form by clicking a hidden button. It worked without problems, but it loaded the page with the dropdown list still appearing on the phone GUI. This would seem a bit weird for usability reasons, if I was to kepe this as an option.
It's not a native phone App, it's a mobile website.
In CodeIgniter, the controller is using a function with 1 parameter which is the selected item from the dropdown list:
public function view_events($organiser_type = '') {...}
When the *$organiser_type* is not sent through the url, I have a piece of code which retrieves the value from the POSTed form:
if($this->input->post('organiser_dropdown')) {
$organiser_type = $this->input->post('organiser_dropdown');
}
I have kind of figured out the problem here. I think that jQuery Mobile is not fully executing the index.php page once i press the back button on the phone.
I put this in all my links to force a page load without ajax:
data-ajax="false"
More information regarding this can be found here: http://jquerymobile.com/test/docs/pages/page-links.html
I have an OnBase e-Form that I'm building. There are three buttons on the form that all submit. OnBase does different things based on the name of the button used to submit the form. If the button has a name of OBBtn_CrossReference it opens another window with a cross referenced document. I need to programmatically 'click' that button.
I've read several posts about how to use JavaScript to submit a form, but none seem to accomplish my goal. I just need to POST and to have it appear to come from a button named OBBtn_CrossReference.
I don't need to submit any data. The way the page is currently set up, the entire page is already a form and since I don't want to break the functionality of the other form buttons it seems I must leave it that way.
UPDATE:
The suggestion below was tested as a call from the onload event in the body tag and since the button posts the page reloads and the call is made over and over again spawning unlimited child windows. I would appreciate a suggestion on how to get the button to only be clicked the first time the page is loaded and not on postback.
There's a click() method on links, buttons, checkboxes. For example , I submitted this comment by running document.getElementById('submit-button').click() from chrome's command line.
I know I am a little late to this post, but you can try and leverage a cookie to get this done:
if (document.cookie.indexOf('xref=true', 0) < 0) {
// Set the xRef cookie, so we do not fire it again for this form.
document.cookie = 'xref=true';
//alert(document.cookie);
document.getElementById("OBBtn_CrossReference").click();
}
else {
document.cookie = "xref=false";
//alert(document.cookie);
}
I tested this on the Thick and Thin clients in 10.0 and it worked fine.
The postings on this site are my own and don't necessarily represent my company's positions, strategies or opinions.