IE10 download issue with two javascript form submits - javascript

So I have a somewhat unique issue I believe and I'm not sure what's the best way around it. I have some legacy code that has worked fine in the past in all browser's and suddenly in IE10 it is not working. I'll try to explain as best I can how it works and what I think is the issue.
I am working on an online banking page which has an option for the user to download their account history as a QIF, CSV, etc. The page is written with Classic ASP and VB server code. The way the feature works is the user clicks the download button which reloads the page with a series of clickable images, one for each download file type. Based on the one they click, a javascript function is then called which submits a hidden form on the page and then submits a second hidden form in order to reload the original view with the account history and filters again. The first form action calls an asp page which builds the file and returns it as a response attachment which usually prompts the browser to download the file, and then the second submit action is just the original asp page with the history details. In IE10, the file doesn't download ever and instead some processing occurs and the second submit which reloads the history goes through fine.
What I've found in my looking is that if I comment out the javascript line that submits the second form, then the download works so I think what's happening is the submits are occuring asynchronously and the redirect one returns before the download one. Or something like that. I'm not sure. I'm trying to figure out a work around without having to completely rewrite the feature. Any thoughts?
EDIT:
The page this all occurs on is accountDetails.asp
The javascript --
function SetOFX(type){
// There is some code that does conditional handling of the #type parameter
document.forms.DownloadForm.submit();
document.forms.Finished.submit();
return false
}
The DownloadForm --
<form name="DownloadForm" id="DownloadForm" action="downloadofx.asp" method="post">
<!-- a bunch of input type="hidden" elements -->
</form>
The Finished Form --
<form name="Finished " id="Finished " action="accountDetails.asp" method="post">
<!-- a bunch of input type="hidden" elements -->
</form>
So the DownloadForm calls a separate asp page to get the download file and then the Finished form posts to the page the user is already on to reload the account history details instead of showing the download image buttons. I realize this is a really bad way of doing this in the first place; this is legacy code written by people who were learning and is already being used in production by hundreds of clients so I can't just rewrite it without a major project approval from my boss and all of our clients.

iI haven't tested any of these ideas, but if you want to keep the current architecture, you could try to detect when the file has been completely downloaded and then navigate away.
Have a look at this question to know how to detect when the file has been downloaded by the browser.
Another idea would be to drop the first form submission in favor of a simple a link with an href attribute that points to your file download link, using query string params to pass additionnal data. You might also want to put taget="_blank" on the link if you still experience the same issue without it.

Here's the answer we came up with in the end. The above javascript shouldn't have ever worked in the first place and in fact we found out after testing that it wasn't working in many places but the part we cared about (the file download) was always working. It turns out up until IE10, all browsers have been smart enough to know that you shouldn't submit two forms that way and they ended up ignoring the second submit. IE10 however was processing them both and the redirect was returning before the file download. Since we didn't care about an auto-redirect we just took that submit out and instead added a submit button to the finished form so the user could manually return to the previous view.
The fixed Javascript --
function SetOFX(type){
// There is some code that does conditional handling of the #type parameter
document.forms.DownloadForm.submit();
return false
}
The fixed Finished Form
<form name="Finished" id="Finished" action="accountDetails.asp" method="post">
<!-- a bunch of input type="hidden" elements -->
<input type="submit" value="Return to Account Details" />
</form>

Related

Fields not clear after initial post to page

I am using a template site from Webmatrix 3.0 that includes a sign in page (among other pages) working primarily with c#, razor, html, and jquery. I have created a new page where users can register that includes a password field, as well as other text fields. My issue is, even when I simply have two fields on the cshtml page and nothing else, these fields are filled with data during an initial page request. This data is old "remember me" data from a previous sign in.
I can either do a get request from another page's form to land on this page, or navigate here from a href link, and the result is the same. To try to find the issue, I even cut almost all the code from the page leaving simply this:
<input type="text" />
<input type="password" />
And both fields are populated when I make an initial page request. I have tried to use things like
value = " something like blank or a single space in here "
etc in the html, as well as trying to clear out the fields to no avail with javascript (which I prefer not to since I have had very spotty success with things like onload). Is there a fairly sure fire way to clear text and password fields for initial page requests? Edit - I have tried autocomplete=off to no avail as well.

IE 8 iFrame causes JavaScript errors on first load only

I use an iframe on my page, which consists of a form with input elements.
Every input element has an onblur() event, which validates the input.
When I open the page in IE 8 with a freshly cleared cache it produces a javascript error like this.
document.getElementById(...)' is Null or not an Object
However, when I inspect the form it is loaded completely and the I'm trying to access is rendered.
Furthermore when i reload the whole page I don't get any errors anymore.
Also when I load the content of the iframe on its own I also don't get errors.
Firefox and Chrome dont throw errors at all.
In short, the Javascript errors I get only occur in IE and only when I use an iframe to display the form (which is mandatory) and only when the page is loaded for the first time.
Any ideas on how I can fix this?
I hope its not too confusing to read.
Edit:
document.getElementById("vHint_"+fieldName).innerHTML=data;
FieldName is the id of the input field. Data is the return value of the validation.
In this case data is an image tag.
After every input field is a span Tag with the id "vHint_"+fieldName.
The event is attached like this:
<input id="Jahr" class="input" type="text" onblur="validDate(this,'Jahr','_beginn')" maxlength="4" style="width:32px" value="" name="Jahr">
First of all thank you for your effort.
The example user13500 provided worked like a charm.
And it made me dig deeper.
And i found the solution.
All input fields are created with a self made ASP Framework, which puts them all in the Session.
The onblur() event of the input field within the iframe triggers an AJAX Request to an ASP file passing the name of the input field as a request parameter. The ASP file now tries to find the field in the Session and retrieve its value to validate the input.
After that the result is posted back to the javascript file, which then uses document.getElementById("vHint_"+fieldName).innerHTML=data; to post the result back in the page.
This normally works without erros.
But, since the application is run in an iframe and the domains of the surrounding page and the application in the iframe are different, IE rejects the Session of the iframe. Thus the result of the ASP validation is empty, because it couldn't find the field in the Session.
Having figured that out the only thing that has to be done is to add this line of code in the application:
Response.AddHeader "P3P", "CP=""CAO PSA OUR"""
This way IE doesn't reject the Session of the application anymore.
Maybe this can be useful for others too.

back button issue during form manipulation

My Project is having 3 forms in 3 different pages say form1.cfm,form2.cfm,form3.cfm.
form1.cfm contains first form as follows
<form name="firstform" method="post" action="form2.cfm">
// form-content
</form>
Next
form2.cfm(action page of first form) contains second form as follows
<form name="secondform" method="post" action="form3.cfm">
// form-content
</form>
Back
Next
form3.cfm(action page of second form) contains Third form as follows
<form name="Thirdform" method="post" action="form4.cfm">
// form-content
</form>
Back
Next
So when I use the Back button link in form2.cfm, it goes to the form1.cfm and no issues on it .when I do the same in form3.cfm, it must go to form2.cfm, but it asks for form resubmission, because I know that it is the action page of form1.cfm.
And I want to go for form2.cfm, when I use the back button link from form3.cfm and don't want to see the form resubmission page.
I don't know whether it is fixable or not. but suggestions or solution are welcome.
Thanks in Advance
The problem is that by using POST, you are telling the browser "Hey, this form has effects that might not be appropriate to repeat."
You could change the method to GET, but that probably isn't appropriate either, because that says "This form has no effects, it's just to show stuff."
One solution is to not submit the form at all, but gather the data with JavaScript, send it with an XHR request and then navigate to the next form, again with JavaScript.
Another solution is to not have several separate forms at all. Just put them all in one master form. If that becomes to large, just use JavaScript to hide the parts that are inactive and have the next/back buttons open and close those parts.
Don't use "Back" because you are telling the browser to resubmit the original page 1 to page 2.
I can recommend that you adopt a simple framework like Fusebox (http://www.fusebox.org/) because in my experience your CF app will quickly grow and this will make your life a lot simpler downstream.
If your goal is to have a "wizard" type interface where you step through pages, you could try putting all your code into a single page and render it inside a 'tab' using jQuery (http://jqueryui.com/tabs/)

weird problem with aspx page closing automatically

First I am new to the asp .net world and am trying to figure out a weird issue that I am having. Any suggestions or comments are welcome.
I have a page that has a form and on submit I launch another aspx file that exists in the same directory.
The problem is the aspx file is shown and the file closes immediately!.
Howewever, the weird part is if I make any modifications to the aspx file and save it and then run my application it works fine ONLY THE FIRST TIME!? any subsequent submit actions launch the aspx page but then the aspx file immediately closes.
But after I make some modifications to the aspx file..(simple ones) it launches correctly the first time.
I realize that this is very little info to go on and I am not even sure if I have got my point across...but any suggestions on how to debug this will be helpful.
We are targetting .net version 4.0 and using IIS7.
I am thinking that the asp worker process is doing something weird like checking for timestamps and closing it?! Not sure tho.
Any help is appreciated.
ASP.Net webforms don't use the form in quite the same way as regular HTML forms. All you need in your form tag is
<form runat="server">
If you want to pass the user onto another aspx page you can use the Response object:
Response.Redirect("~/pages/SomeOtherPage.aspx");
or (Server.Transfer - read up on the differences)
Server.Transfer("~/pages/SomeOtherPage.aspx");
If you want to open a page in a new/pop-up window or similar you'll need to do so using JavaScript
window.open('/pages/SomeOtherPage.aspx') [There are overridden versions of this method]
You can use the forms PostbackUrl property too, but this will also keep the user in the same browser window. More info here.
HTH

How to submit form with data before logging someone out?

I'm using the document.form.submit() function for a rather large input form (hundreds of fields, it's an inventory application). I'm calling this after the user has been idle for a certain amount of time and I would like to save any data they've typed. When I try this the page reloads (the action is #) but any new text typed in the fields is not passed in the REQUEST, so I don't get to put it in the DB. Is there some fundamental reason why this happens or is my code just not playing nice together (I'm using the EXTJS grid view to show the form and a library for tracking idle time)?
Thanks,
Robert
I guess I put the answer here. What I found was that doing this:
setTimeout('frm.submit();', 2000);
caused the page to reload but didn't submit the form. When I did this:
frm.submit();
The form was submitted and the data was passed. I don't know why the first way didn't work, but I don't need to know that:)
Might the server be voiding out the input values. Say if your page on the server looks like this:
<form action="/page.cgi">
...
<input name="Fieldx" value=""/>
</form>
I think it'll void out the field. Or this the server action might be setting it indirectly. In JSF, something like this.
<input name="Fieldx" value="#{bean.nullProperty}"/>
What do you have on the server and what's your browser?
I would try to catch the HTML post request to see if the input fields are included. If they are then your server has problem.
But regarding what you said, I think it's because there's conflict in the way your browser handles JavaScript DOM. This may be the case if you leave out the submit button on your form and it works.
The submit method of HTMLFormElement objects should just submit the form, as if the user had clicked the submit button. So, if the action attribute of the form is set to #, it would just seem to refresh the page, because it’s sending the form data to the same page.
Strange that it still does it when you set the action attribute to another page though.
Is the method attribute of the form set to get or post?

Categories

Resources