I have a webform application.
The page has a from which contains a set of textboxes and one ASP:FileUploader.
A button called "Upload" will uploaded the file separately from saving the whole form.
I set up a httpHandler to upload files in chunks, and it should be fired after user click "Upload".
They only way I worked out is set the PostBackURL attribute in the "Upload" button. e.g.
PostBackURL = ".upload"
which maps to the httpHandler's Path.
But my problem is "PostBackURL" is a Redirect , It does fire the httpHandler but it will direct to ".upload" page (which its content is empty ) , and user lost information in other textboxes.
So what is the best way to fire a httpHandler and let the browser stay in the current page? Is iframe the only option?
To post to a hidden <iframe> element, the general pattern that I've always followed is:
Set the target of the form to point to the name of the <iframe> element. (Generally I give the <iframe> the same "name" and "id" value out of old habit; it may not be necessary.)
Post the form. That'll initiate the HTTP transaction but it won't blow away the page that the form is on.
The response to the POST should be a page with nothing on it (or almost nothing) except some JavaScript. That code can talk to the parent page to tell it either that there was a problem with the file upload (like, you wanted an image file, and the file posted was text) or that the upload succeeded. In either case, the parent page can update itself with either an error message or some success message.
At that point, the form "target" attribute can be cleared.
When the <form> is to be posted "normally", you might want to disable the file <input>. (Depends on your situation.
Related
On our webapp the page contains a filter form with some field, a SEARCH button, which calls a jQuery AJAX, loads the items according to the filter form data. From javascript we pushes the form filter values to the url to maintain the browser history.
When we press the BACK button, the page "reloads", but we see that the form values do not refresh to the current values. Examining the page source, we see that the html contains the textbox element with the proper value attribute (from the url values), but the textbox still displays the last value of the form. Sometimes. Sometimes it works.
We added the autocomplete="off" to the form values, which helps a little, "sometimes" went to "usually", the displayed values usually matches the html sources. But not always. We think that the browser cache is the bad guy - when we press the back or forward button sometimes the page does not refresh, but comes from "somewhere".
We added a web config cache setting:
<caching>
<outputCacheSettings>
<outputCacheProfiles>
<add name="CacheProfileNone" noStore="true" varyByParam="*" duration="0" />
</outputCacheProfiles>
</outputCacheSettings>
</caching>
and added the attribute to the controller action
[OutputCache(CacheProfile = "CacheProfileNone")]
public ActionResult Index(QueryViewModel model)
{...}
but it didn't help. :( Sometimes when we press the back button wrong form values are displayed, not matching with the html values. The form values are not manipulated with custom javascript functions. We added onchange event with console.log output, and sees no log messages, so we think the form element display value does not depend on our decisions or code, but (we think) it depends on the browser things.
We are open new suggestions what to do next, to get the browser to always load the page and displays the current value as it is defined in the html source.
Any suggestions are welcome! Thanks!
I'm guessing (because you provided no code), but this doesn't work the way you think:
From javascript we pushes the form filter values to the url to
maintain the browser history.
You need to investigate the History API replaceState() method.
Reference here:
https://developer.mozilla.org/en-US/docs/Web/API/History_API
I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.
As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.
Cookies or localStorage if you aim for only modern browsers:
localStorage
Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.
All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.
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.
I am displaying a warning dialog box whenever user tries to navigate from current page without saving data on current page. Its working fine now I want to call a function (Spring controller, its kind of java function which handled URL mappings ) when user clicks on Ok (in warning dialog box) and then he should get redirectd to desired page.
Let me try to make it simple (Its confusing for me also):
User is on registration page, he/she made some changes and didn't save it.
Now user clicked on any other link for example he clicked on About Us link.
Now I want to execute my spring controller.
After execution of controller user should get navigated to About Us page.
For this I need to save value of clicked hyperlink and pass it to my spring controller.
So how can I store URL of clicked link (URL of About Us page in above example) ?
PS: I will really appreciate if anybody can edit my question to make it easier to understand.
if you use jQuery, you can attach an event handler to onclick to all links in the page and once clicked the handler should save the href attribute to some variable. then create a onbeforeunload event listener on your window, where you can use the value however you want, call your controller or save the value in a cookie or something.
Are all the links on the page pointing to your spring application? If there are no external links anywhere (pointing to external resource) - then you could write a simple Filter where you can save the requested page into the session.
Otherwise, if there are links to external resources - you would need to rewrite them from www.external.com to www.my.com\MagicController?requestedPage=www.external.com. Controller will save the link and send a redirect in HTTP header to the requested page. This is a common practice - even google does that (check out the google search result links for how it will look like).
Added: Weird, but google does that only on some rare occasions, so you probably won't be able to find an example there.
Don't require to preserve the href of selected tab.Do one thing attach same javascript function with each tab and pass the "this" as parameter of function.
Function of the javascript is
function Attach(ele)
{
// 1. Find the handle of selected tag and store in the variable.
ele=$(ele);
// 2. Find the value of href
var href=ele.attr("href");
// 3. Perform server side operation you want.
// 4. redirect to another page.
window.location=href;
return false;
}
I am developing my website using jQuery. For the Private Messaging feature, what I had right now is showing a ModalBox (dialog box). So, whenever user wanna check message, they will be displayed with a dialog box with the inbox shown. Now, inside that ModalBox, I have a "Compose" section where users can send message. My question is, when user submits the form, how we could retrieve those inputs without having to actually submit it? Because, I have tried it..., that when I do the submit(), it closed the ModalBox.
Any help would be appreciated.
Since you're using jQuery, see here
In case you're not familiar with AJAX, basically it allows you to send a request to the server (in this case, your submitted data), process the data on the server, and then receive any return back from your request, all without reloading the entire page.
This should alleviate the issue of the modal box closing (the page reloading upon submit, really.)
[edit]
See this article from here at StackOverflow on using the live event handler. This should take care of the issue of not getting the value from newly created DOM elements.
[/edit]