Even using the Post/Redirect/Get method, and including javascript to disable a button after it has been clicked, I am having a problem with users being able to just rapidly hammer a submit button and get multiple form posts in before server side validation can stop it.
Is there any way to stop this? I've even tried this method : how to implment click-once submit button in asp.net mvc 2?
And I've tried outright blocking the UI with jquery blockUI. I have BOTH client side and server side validation in place, and they work perfectly - but a user smashing the submit button twenty times in under a second just seems to keep breaking it.
Use javascript to wire the onclick event to disable the button.
If you are already doing that and you can still get multiple form posts, then the problem is a delay between the clicking of the button and the button being disabled, and you must be submitting the form multiple times during this delay.
To fix this, make the onclick event first make a call to stopPropagation() to stop the submit event. Then validate that the form is not in submission-blocked state. You can do this by creating a page-scoped javascript variable with a boolean value like can_submit. Test for can_submit being true before submitting the form. Set the can_submit = false when the button is disabled, so even if the button is not disabled fast enough, the form will not submit if the value has already been set to false.
In most cases I'd say that this isn't worth fixing - if a user is going to do something as silly as clicking submit 20 times they should expect to get an error.
The only real fix for this is to set up your action to only accept the same form once - add a hidden field that is set to a random value when the form is loaded. When the form is posted, save that value somewhere temporarily and if it is already there you have a duplicate request that shouldn't do anything.
Related
The text in ckeditor field is not sent when submitting forms for the first time (only on the second time, third time, etc).
For example, If try to create an article's post and submit the form I'll get a validation error: 'The field body is required'. If try to submit again (for the second time or third time), It will work well.
The real problem is when editing! For example, when editing a form the field 'body', among others fields, is filled out with the data from the database. In other words, there are already text in the ckeditor field.
If I try to submit the form for the first time it will not update the body because the text in the ckeditor is not sent; what is sent is the default value (the old article's body, which was filled out with data from the DB).
Therefore, it won't edit unless I get a validation error in other field (if I get a validation error, I'll have to submit again, and that will work).
How to solve this problem? Is this an known bug in CKEDITOR 4? If I don't solve it the users will feel frustrated if they have to submit the form at least twice to edit or to create an article.
Here is a list of plugins I'm using (may be useful to solve the problem):
a11yhelp, about, api, autocomplete, autocorrect, browser, clipboard, colordialog, copyformatting, crossereference, dialog, div, docprops, find, googlesearch, image, link, liststyle, magicline, mathjax, openlink, pastecode, pastefromword, preview, quicktable, scayt, section, showblocks, sourcedialog, specialchar, table, tableselection, tabletools, tabletoolstoolbar, texttransform, widget, wsc
By the way, I downloaded ckeditor using ckeditor builder in their official website.
I opened this issue in GitHub and a guy figured out the problem. His proposed solution worked wel!! Here is what he said:
Workaround
As the issue is more tricky to fix than it seems, for now I propose a
simple workaround: invoke ajaxRequest not on $( document ).ready,
but rather on editor's loaded event:
CKEDITOR.replace( 'editor', {
on: {
loaded: function() {ajaxRequest();}
}
});
Explanation of the issue
The issue is connected with how DOM listeners are registered for given
element:
The order of event listeners for a particular event type will always
be:
The event listeners registered with addEventListener() before the first time the event handler's value was set to non-null
Then the callback to which it is currently set, if any
Finally, the event listeners registered with addEventListener() after the first time the event handler's value was set to non-null.
In case of CKEditor 4, the value of the form's element is modified by
editor._attachToForm private method, which adds event listener to
form's submit event:
ckeditor-dev/core/editor.js form.on( 'submit', onSubmit );
However this listener is added on loaded event, which is fired
asynchronously when editor is loaded – so after registering
synchronous onsubmit handler with the validation logic. This way
editor's field is updated after validating.
Proposed solutions
Update editor's element on formdata event. This way we would have
total control over data being submitted and we would be sure that
correct data is set before submit event. The problem with this
solution is the fact that browsers' support is non-existent; the event
will appear in Chrome 77, however it is still not known if and when
the support will appear in Firefox or Safari.
Update editor's element on every change in the editor's content thanks
to change event. This solution will also fix cases, where some other
scripts are using value not from the editor, but directly from the
replaced textarea – they would get fresh data more often then only
after submitting the form. However this solution requires #1364, which
connects with a pretty big refactoring.
NOTE: AjaxRequest is the function I was using to submit the form togehter with Jquery.
I have been tasked with re-creating an old PL/SQL Web Toolkit front end in Application Express (Apex).
I would like to display a popup after the page is submitted and after computations and validations.
The page can be submitted by clicking a button OR by hitting enter.
I have googled and got a modal popup working (called by javascript) but I can't seem to call it at the right point. I can call it on submit (before the validations etc.) but not after the validations.
I have tried creating a branch to URL at the correct processing point and then have the URL set to:
javascript:openForm();
But then I get a page will not display error.
Can anyone out there explain how I could do this?
Apex Version: 4.0.2
Oracle 10g
I suppose what you want to do is to perform the validations, have values submitted to session state, but not execute further processes.
However, when you submit the page it is sent to the server; and everything you see in the page processing region will sequentially fire. There is no way to halfway through the processes call a javascript function, since basically you are not on the clientside anymore.
What you can do is to create a branch after your validations to the same page. Redirect to it but provide a REQUEST value, for example OPENFORM.
Create a dynamic action, firing on page load, with a true action that executes javascript and opens up your modal page. Then set the condition on your dynamic action to Request = Expression 1, providing the request value to Expression 1 (OPENFORM).
(Note that this is the Conditions region, and not the 'Condition' field of the 'When' region)
This should cause the page to be submitted, validated, then re-loaded but with a request value, and the dynamic action firing, opening your modal page.
Just a point of interest:
If you have actual processes on this page though, then be careful with the Enter key. Buttons by default submit to session with the request value set to their name, and thus making it possible to conditionally execute processes or branches. The enter key does not submit with a request value set i believe. So if your branch is conditional, the enter key might simply skip over it.
My project is using Wicket's AjaxFormValidatingBehavior to auto-save form content to Session on sort of a multi-tab form with a tree menu (there is no save button on individual tabs, though there is a "Save" button that actually submits the form, runs the validations and saves contents to database). I am facing few issues:
Since the behavior is added to all form components' onChange event, there is a server-trip every time user moves from one field to another. I know that a throttle duration can be specified to prevent this, but its not possible to set in my case as my forms are of different lengths/complexity, many components dynamically generated (including the tree menu). But is there a more elegant solution to auto-save form content (that doesn't have a submit button) rather than this annoying solution.
Another issue I am facing is that post onChange event, on Firefox the component loses its focus after the "server trip" ends. While on IE7 it works fine.
For the first question I think you need to add a pipelining facility, on your components' onchange call a javascript function of your which calls your webapp. You can include a feature similar to the one provided with the throttle duration but page-wide (delay each calls and only trigger the last if it is older than x milliseconds for example).
For the second one, I think you have to use the AjaxRequestTarget#focusComponent in your behaviors, or handle this thing in your "wrapper" as described in the first answer.
Currently, a spring application I am working on has several wizards that it is using with Spring's AbstractWizardFormController. During the early stages of development(pre-design phase), the type of "next" button did not matter.
Just to refresh, the Next and Back button are submit buttons with target attributes. So a next button on the first page of a wizard would look like the following.
<input type="submit" name="_target1" value="Next"/>
This is the standard way Spring does wizards on the view. This works fine, given that you want your Next button to be a standard HTML submit button. Otherwise, in my case, If I want a custom button, I am not sure how to do this. I know it is possible, but haven't found any documentation.
I imagine I will need to do a javascript submit, but I am not sure how to set the name of the button, of if something else needs to be done.
I just need to know how I can still extend AbstractWizardFormController, and use custom buttons.
When clicked, HTML submit button submits a form with additional parameter {name}={value}, that is _target1=Next. I guess the value doesn't matter here, controller looks at the name. So, if you want to emulate this with Javascript, you may, for example, dynamically add a hidden field with name = "_target1" before submit.
I have a html table in my application that shows the state of various jobs running in the system. Each job has a state associated with it e.g a swirly gif for running jobs. New jobs have a checkbox next to them that allows the user to select and kick off the associated job.
The table is a struts2 auto refreshing div (sx:div), it refreshes every few seconds to reflect what is currently happening with the jobs.
The problem is that when the div refreshes I lose that state of the checkboxes.
Is there an elegant way of maintaining their state? I have the option of calling some javascript upon completion of the ajax refresh using the dojo topic system built into the tag but i'm not sure what is the best way to approach it.
I'm not very familiar with struts so take me advice for what it's worth.
There are two ways to approach this that I see.
The first (and probably simplest) is to add an event to the checkboxes which stores the checked state in an array or object onchange. Then, on callback from the ajax refresh, restore those states.
The second approach would require that the ajax refresh either be executed as a post so that the checkboxes are submitted to the server, or having a separate ajax action which fires off when a checkbox is checked. With either of these options, the ajax refresh could "know" at render which checkboxes to render as checked.
If you decide to go with number one, the javascript is not very difficult, especially if you happen to be using a good library (jquery, etc.).