I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!
If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.
If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function
This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.
Related
I have a hidden field that stores some Ids of items to be updated when a button is clicked on the page. This is working fine. However, if the user clicks the Update button, then waits for page to reload, and then refreshes the page manually (using browser Refresh button), the data is resubmitted and creates duplicate data in the database.
Is there a way to clear the hidden field in the Postback data so that if the user does refresh the page manually, the hidden field will be empty and no updates to the database will be made?
So far, I have tried to manually update the ViewState using the code below after the database is updated.
ViewState["hdnBulkIds"] = "";
I have also tried to exclude the hidden field from the ViewState and manually clear it using jQuery on page load.
$( document ).ready(function() {
$('#<%= hdnBulkIds.ClientID %>').val("");
});
In both cases, I cannot seem to update the data "instance" that is sent to server on manual page refresh so the hidden field retains its original values from original button click.
I guess the question can be simplified to this: Is there a way to update the Postback data directly using ViewState or some other method to clear the hidden field?
This is a big issue with webforms in general and a big reason you should consider jumping ship to MVC. There may be an elegant way to handle this through webforms, but I'm not aware of any.
Once the user submits a form the browser "remembers" that submission and the refresh will re-submit it. There is nothing you can do about that, you have to detect a second submission through other means.
Your best/most true solution is to do a redirect after you get all of your data, and use your query parameters to re-build the page in the state it needs to be in. Then when the user refreshes the screen it will resubmit the redirect instead of the form submission.
Page.Redirect() or something along those lines is the function that lets you do a redirect. Trouble is, a page redirect will erase all state webforms was maintaining about the page, you have to rebuild all of it.
You also might be able to implement some sort of "CSRF" token style system. Generate a random number and store it in the user session on page load. When the user posts back, invalidate that number somehow. That way, if they post-back again with the number you can cancel the request.
That's a hackey way of going about things, doing a redirect is the "tried tested" method to my knowledge.
Another option is if the postback edits a value, check for duplicates or if the value is edited and if there are duplicates don't let the user double-submit.
I have a page which opens a thickbox of another page which contains a form within it. However, upon that form being submitted (it writes the data to the DB) I need the parent page of the thickbox to update certain rows of the form (the values that have been changed).
I have been reading online, but I have never really attempted doing anything like this with Ajax before (i just normally use jQuery load()). Essentially my theory is that I could use the jQuery .submit() funciton and have a callback function which takes the post values and passes them to the previous page. I am unsure however to pass the values from the form caught in the callback function to the previous page as the form although being shown on the page in a thickbox is a different page.
Any help would be greatly appreciated!
Just to help visulaise what the page looks like:
The form showing details is under the thickbox, and once the update buttons is clicked I would like to have a way of passing the new details back to that form without having to refresh the entire page.
Many thanks,
Well there are several ways you could do it one could be to find the div that the thickbox opens then find the iframe in there which would in theory show the returned data from the server depending on how you are returning it and then using jQuery you could extract the data and update the original page.
Another way would be to just retrieve the updated data manually through the main page on the onClose event of the thickbox which IMO is a waste of a call if the iframe returns it.
That all depends on how your server returns the data to the form though.
You can do two things, first you might want to use the form submit event to trigger an update of the form on the page:
$('#myThickboxForm').submit(function() {
// take the data in one of the form fields
var fieldInputData = $('#someThickboxFormField').val();
// now update the other form using this value
$('#pageForm').find('#aPageFormField').val(fieldInputData);
});
Your thickbox also triggers an "unload" event when it gets closes, you can listen to that event like this:
$('#TB_window').on('unload', someFunction);
var someFunction = function() {
// do something when the thickbox closes
}
I am currently working on an already established system that I cant make very drastic changes to. I need to "autosave" a form every time one of the fields is entered/updated. To do this I bound an event to the onblur of every field
document.form.submit();
It goes to the processing page, does what needs to be done and comes back to the form and retrieves the information from mysql to display it. It does have a bit of a "flash" from the reload but this is not a problem. The real problem is the user loses their tabindex since essentially the page is reloaded. So when tab is pressed the form is submitted and reloaded and the tab starts back from the beginning instead of the next field as the user would expect it to.
Is there a solution using javascript (no jquery) that I could implement that would "remember" the field the user was in and go to the next field after the form is submitted?
thank you!!
I want to show a acknowledgement (more precisely a popup) when form is successfully submitted.Previously I was using Ajax to validate form and display pop up but now I want to achieve same without Ajax.
Is there any event in javascript/Jquery which is invoked after successful form submission? or Is there any other alternative available?
Thanks!
EDIT 1 :
I am using Spring 3.0.
Here is the detailed scenario
1. User fill the form and click on submit
2. Request will be sent to controller (Server side)
3. Validation will be done at server side
4. If errors are present I am using Spring validation to show it and goto Step 1
5. else successfully submit the form and show a popup.
6. After user clicks on popup redirect to other page.
EDIT 2:
I am completely agree with the opinion that Ajax is the right/best way to do it and I already implemented it using Ajax. But client want to use non-ajax approach and I cannot go beyond his words.
This question piqued my curiosity, as I was trying to do something similar using the iframe solution suggested by Leon. Eventually I succeeded, however, I would like to suggest that rather than using a direct onload property, you make use of the jQuery .load() event on the iframe.
Edit: So here's how I set up the form (using HTML5, so quotes aren't necessary):
<div id=message></div> /* Example-specific, see below */
<form method=post action=backend.php target=iframe>
// Form data here
</form>
<iframe name=iframe></iframe>
I added the following CSS code to hide the iframe:
iframe {
border:0px;
height:0px;
visibility:hidden;
width:0px;
}
Don't use display:none, as some browsers will refuse to submit to an element that's not displayed.
Then in my $(document).ready() JavaScript...
$('iframe').load(function(){
// Your load event here.
});
You could also change that about, so that it specifically only triggers after a specific event (if you're using dynamic forms, for example). In such a case, you may want to use .unbind('load') before .load() to prevent previously-added .load() functions from calling.
Now when the form is submitted, it loads into the hidden iframe. When the iframe loads the page (backend.php, in my example), it triggers the .load() function. In my specific case, I set up a <div id=message> to display a message:
$('iframe').load(function(){
$('#message').html('The form successfully submitted.');
});
Without Ajax? No Problem - let's go back to how the Web really used to work in the past ;-)
Since I am getting you don't want to refresh the current page, how about this approach:
have a hidden iframe on the same page, with a name & id
point the target property of your form to the name given in the previous step
submitting the form will now be "hidden"
you can have an onload property on the iframe set to a javascript method of your liking to get called once the form finished submitting
that javascript code could also retrieve the contents of the iframe and check for your server-side response (maybe even including an error msg)
notify the user about the result
This is all fairly easy to setup, let us know how it works for ya..
I am not sure which language you are coding in.
One option - use javascript.
On the submit button onclick event (client side event), perform the page validation and display alert pop up, if the page is valid.
<script type="text/javascript">
function OnSubmitClientClick() {
Page_ClientValidate();
if (Page_IsValid) {
alert('Form has been successfully submitted.');
return true;
}
}
</script>
Why do you want to drop AJAX approach? Without AJAX, server side validation implies page reload. On page reload you would lose client side (JS) state.
One alternative is to use hidden frame/iframe/a new window to perform server side validation on form submit(possibly use the pop up you are referring to in your question). Which in my opinion is not the right approach(A BIG NO). You may rather stick to AJAX or go with non AJAX way of form submit.
I'm doing some ASP using Telerik.
On my page there are 2 buttons called Create Window and Postback. The Create Window button created a new RadWindow dynamically on it's click event (client-side) by using window.radopen(). The Postback button simply does a postback. My problem is that, the windows get lost after every postback. What can I do to make my RadWindows to remain opened after a postback, including its content and position.
If there is no built-in function to restore my dynamic RadWindows, please tell me how to save current windows content to manually load it on the next postback. I thought of using a Hidden control to save my RadWindow position and content, but how can I do that (it's content is a user control with plentiful textboxes, and i don't want my customer to re-type all the textboxes).
The RadWindows are generated via JavaScript when they are first shown. You can easily check this via your developer plugin of choice. Once you show them they create their wrapper div as a direct child of the form element. This means that they have no server-side rendering and thus cannot be persisted on the server across postbacks.
What you can do is use AJAX - have the button perform an AJAX request that will update the needed content of the page, but will leave the RadWindows out of the update. Check out this help article where they explain how to use AJAX with a RadWindow: http://www.telerik.com/help/aspnet-ajax/radwindow-ajaxifying.html.