You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Charlouze <me...@charlouze.com> on 2014/12/01 18:38:14 UTC
Prevent double or more submissions.
Hey tapestry's users/gurus !
I need a way to prevent double form submission. I first had a look at this
example
<http://jumpstart.doublenegative.com.au/jumpstart7/examples/javascript/creatingmixins1>
from jumpstart. As it is written, it conflicts with client-side form
validation and I also need client side form validation.
I dug into tapestry JS source and found that there was some events called
after validation. At first, I was happy but then I realize that there was a
validate event only if validation succed and in my case I need a way to
know if validation failed (in order to re-enable the button).
I'm thinking about overriding t5/core/forms.coffee with my own but I don't
like to do that. That's why i'm asking : Does someone know a better way for
doing this ?
Thanks in advance,
Charles.
Re: Prevent double or more submissions.
Posted by Charlouze <me...@charlouze.com>.
Thanks for the advice Thiago, you really are helpful for tapestry community
;)
I'll do a patch for the validation error and create a JIRA with it.
2014-12-02 12:04 GMT+01:00 Thiago H de Paula Figueiredo <th...@gmail.com>
:
> On Tue, 02 Dec 2014 01:25:18 -0200, Charlouze <me...@charlouze.com> wrote:
>
> @Thiago: I'd like to inform my user that the form is currently being sent
>> (using an ajax request). That's why I need something similar to the
>> clickOnce example.
>>
>
> You can do that by adapting the example I provided.
>
> You've been actually asking for two different things: preventing double
> submission and some way of knowing a validation error occurred. The first
> one can be done by adapting the example I provide. The second one can be
> implemented now by checking whether the validation error message HTML
> elements are visible.
>
> Do you think that adding a validation error event isn't a good idea
>> anyway ? (It would probably serves other purpose for other
>> people)
>>
>
> Yep! JIRA please? :)
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Prevent double or more submissions.
Posted by Barry Books <tr...@gmail.com>.
This is the last form event so it's good for double click prevention. There
are other form events that happen sooner.
On Tuesday, December 2, 2014, Charlouze <me...@charlouze.com> wrote:
> @Barry: This is a good idea to use the prepareForSubmit event but it occurs
> after validation so you have to have a fast validation (which is the case
> for most of apps, mine included).
>
> 2014-12-02 12:29 GMT+01:00 Barry Books <trsvax@gmail.com <javascript:;>>:
>
> > Here is the one I wrote for 5.4. It uses the perpareForSubmit form event
> >
> >
> > define(["jquery","t5/core/events"], *function*($,events) {
> >
> >
> >
> > *return* *function*(parameters) {
> >
> > $('#'+parameters.id + ' :submit').removeAttr('disabled');
> >
> >
> >
> > $('#'+parameters.id).bind(events.form.prepareForSubmit,
> > *function*() {
> >
> > $('#'+parameters.id + ' :submit').attr('disabled',
> > 'disabled');
> >
> > $('#'+parameters.id + ' :submit').val("Please Wait")
> >
> > });
> >
> > };
> >
> > });
> >
> >
> >
> > *public* *class* Sub1 {
> >
> > @Inject
> >
> > *private* JavaScriptSupport javaScriptSupport;
> >
> >
> >
> > @Inject
> >
> > *private* FormSupport formSupport;
> >
> >
> >
> > *void* afterRender(MarkupWriter writer) {
> >
> > JSONObject params = *new* JSONObject();
> >
> > params.put("id",formSupport.getClientId());
> >
> > javaScriptSupport.require("sub1").with(params);
> >
> > }
> >
> >
> >
> > }
> >
> > On Tue, Dec 2, 2014 at 5:04 AM, Thiago H de Paula Figueiredo <
> > thiagohp@gmail.com <javascript:;>> wrote:
> >
> > > On Tue, 02 Dec 2014 01:25:18 -0200, Charlouze <me@charlouze.com
> <javascript:;>> wrote:
> > >
> > > @Thiago: I'd like to inform my user that the form is currently being
> > sent
> > >> (using an ajax request). That's why I need something similar to the
> > >> clickOnce example.
> > >>
> > >
> > > You can do that by adapting the example I provided.
> > >
> > > You've been actually asking for two different things: preventing double
> > > submission and some way of knowing a validation error occurred. The
> > first
> > > one can be done by adapting the example I provide. The second one can
> be
> > > implemented now by checking whether the validation error message HTML
> > > elements are visible.
> > >
> > > Do you think that adding a validation error event isn't a good idea
> > >> anyway ? (It would probably serves other purpose for other
> > >> people)
> > >>
> > >
> > > Yep! JIRA please? :)
> > >
> > >
> > > --
> > > Thiago H. de Paula Figueiredo
> > > Tapestry, Java and Hibernate consultant and developer
> > > http://machina.com.br
> > >
> > > ---------------------------------------------------------------------
> > > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> <javascript:;>
> > > For additional commands, e-mail: users-help@tapestry.apache.org
> <javascript:;>
> > >
> > >
> >
>
Re: Prevent double or more submissions.
Posted by Charlouze <me...@charlouze.com>.
@Barry: This is a good idea to use the prepareForSubmit event but it occurs
after validation so you have to have a fast validation (which is the case
for most of apps, mine included).
2014-12-02 12:29 GMT+01:00 Barry Books <tr...@gmail.com>:
> Here is the one I wrote for 5.4. It uses the perpareForSubmit form event
>
>
> define(["jquery","t5/core/events"], *function*($,events) {
>
>
>
> *return* *function*(parameters) {
>
> $('#'+parameters.id + ' :submit').removeAttr('disabled');
>
>
>
> $('#'+parameters.id).bind(events.form.prepareForSubmit,
> *function*() {
>
> $('#'+parameters.id + ' :submit').attr('disabled',
> 'disabled');
>
> $('#'+parameters.id + ' :submit').val("Please Wait")
>
> });
>
> };
>
> });
>
>
>
> *public* *class* Sub1 {
>
> @Inject
>
> *private* JavaScriptSupport javaScriptSupport;
>
>
>
> @Inject
>
> *private* FormSupport formSupport;
>
>
>
> *void* afterRender(MarkupWriter writer) {
>
> JSONObject params = *new* JSONObject();
>
> params.put("id",formSupport.getClientId());
>
> javaScriptSupport.require("sub1").with(params);
>
> }
>
>
>
> }
>
> On Tue, Dec 2, 2014 at 5:04 AM, Thiago H de Paula Figueiredo <
> thiagohp@gmail.com> wrote:
>
> > On Tue, 02 Dec 2014 01:25:18 -0200, Charlouze <me...@charlouze.com> wrote:
> >
> > @Thiago: I'd like to inform my user that the form is currently being
> sent
> >> (using an ajax request). That's why I need something similar to the
> >> clickOnce example.
> >>
> >
> > You can do that by adapting the example I provided.
> >
> > You've been actually asking for two different things: preventing double
> > submission and some way of knowing a validation error occurred. The
> first
> > one can be done by adapting the example I provide. The second one can be
> > implemented now by checking whether the validation error message HTML
> > elements are visible.
> >
> > Do you think that adding a validation error event isn't a good idea
> >> anyway ? (It would probably serves other purpose for other
> >> people)
> >>
> >
> > Yep! JIRA please? :)
> >
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
> >
>
Re: Prevent double or more submissions.
Posted by Barry Books <tr...@gmail.com>.
Here is the one I wrote for 5.4. It uses the perpareForSubmit form event
define(["jquery","t5/core/events"], *function*($,events) {
*return* *function*(parameters) {
$('#'+parameters.id + ' :submit').removeAttr('disabled');
$('#'+parameters.id).bind(events.form.prepareForSubmit,
*function*() {
$('#'+parameters.id + ' :submit').attr('disabled',
'disabled');
$('#'+parameters.id + ' :submit').val("Please Wait")
});
};
});
*public* *class* Sub1 {
@Inject
*private* JavaScriptSupport javaScriptSupport;
@Inject
*private* FormSupport formSupport;
*void* afterRender(MarkupWriter writer) {
JSONObject params = *new* JSONObject();
params.put("id",formSupport.getClientId());
javaScriptSupport.require("sub1").with(params);
}
}
On Tue, Dec 2, 2014 at 5:04 AM, Thiago H de Paula Figueiredo <
thiagohp@gmail.com> wrote:
> On Tue, 02 Dec 2014 01:25:18 -0200, Charlouze <me...@charlouze.com> wrote:
>
> @Thiago: I'd like to inform my user that the form is currently being sent
>> (using an ajax request). That's why I need something similar to the
>> clickOnce example.
>>
>
> You can do that by adapting the example I provided.
>
> You've been actually asking for two different things: preventing double
> submission and some way of knowing a validation error occurred. The first
> one can be done by adapting the example I provide. The second one can be
> implemented now by checking whether the validation error message HTML
> elements are visible.
>
> Do you think that adding a validation error event isn't a good idea
>> anyway ? (It would probably serves other purpose for other
>> people)
>>
>
> Yep! JIRA please? :)
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Prevent double or more submissions.
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Tue, 02 Dec 2014 01:25:18 -0200, Charlouze <me...@charlouze.com> wrote:
> @Thiago: I'd like to inform my user that the form is currently being sent
> (using an ajax request). That's why I need something similar to the
> clickOnce example.
You can do that by adapting the example I provided.
You've been actually asking for two different things: preventing double
submission and some way of knowing a validation error occurred. The first
one can be done by adapting the example I provide. The second one can be
implemented now by checking whether the validation error message HTML
elements are visible.
> Do you think that adding a validation error event isn't a good idea
> anyway ? (It would probably serves other purpose for other
> people)
Yep! JIRA please? :)
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Prevent double or more submissions.
Posted by Charlouze <me...@charlouze.com>.
@Thiago: I'd like to inform my user that the form is currently being sent
(using an ajax request). That's why I need something similar to the
clickOnce example. Do you think that adding a validation error event isn't
a good idea anyway ? (It would probably serves other purpose for other
people)
@Harry: Your method is kind of the same as the jumpstart example and
therefore, it should break the form on validation error.
2014-12-01 19:56 GMT+01:00 Harry Zhou <su...@gmail.com>:
> Below is the source of a ClickOnce mixin I wrote for 5.4. Hopefully
> it helps. Note that the mixin should be applied to a <form> element.
>
>
> 1. Trivial java class
>
>
> package some.package.name.mixins; // Insert package name. That
> "mixins" has to be there.
>
> import org.apache.tapestry5.ClientElement;
> import org.apache.tapestry5.annotations.InjectContainer;
> import org.apache.tapestry5.annotations.MixinAfter;
> import org.apache.tapestry5.ioc.annotations.Inject;
> import org.apache.tapestry5.services.javascript.JavaScriptSupport;
>
> @MixinAfter
> public class ClickOnce {
> @Inject
> private JavaScriptSupport javaScriptSupport;
> @InjectContainer
> private ClientElement clientElement;
>
> public void afterRender() {
> javaScriptSupport.require("clickOnce").with("#" +
> clientElement.getClientId());
> }
> }
>
> 2. JavaScript. "clickOnce.js" should be a javascript file under the
> folder: src / main / resources / META-INF / modules /
>
> define(["jquery"], function($) {
>
> return function(elementId) {
>
> $(elementId).on("click", function(e) {
>
> var element = $(this);
>
> if(element.data("clicked") == true) {
>
> element.prop("disabled", true);
> e.preventDefault();
>
> } else {
>
> element.data("clicked", true);
> if(element.is("a")) {
> element.text("One moment ..."); // Change "One moment ..." to
> whatever prompt you like; use message catalogue for i18n.
> element.addClass("disabled");
> } else {
> element.val("One moment ...");
> }
>
> }
>
> });
> }
>
> })
>
> That "e.preventDefault()" stops the form from emitting a submission event.
>
>
> 3. Like all JavaScript solutions, the above wouldn't work if
> JavaScript is somehow disabled in the user browser, and can be
> bypassed. For server-end prevention of double-clicking, implement a
> token system that stores a random token in both session and as a
> hidden field (using <t:hidden>, etc.) in the form. The token in
> session gets immediately removed upon first use (token redemption).
> Subsequent token redemption for the same token should be ignored.
> This comes with the additional benefit of CSRF prevention.
>
>
> On Mon, Dec 1, 2014 at 1:26 PM, Thiago H de Paula Figueiredo
> <th...@gmail.com> wrote:
> > On Mon, 01 Dec 2014 16:05:02 -0200, Charlouze <me...@charlouze.com> wrote:
> >
> >> I'm not sure to understand what you mean... jumpstart example uses plain
> >> old js and does not work with tapestry client-side validation.
> >
> >
> > I mean something like
> >
> http://stackoverflow.com/questions/926816/how-to-prevent-form-from-submitting-multiple-times-from-client-side
> .
> >
> > $("form").submit(function() {
> > $(this).submit(function() {
> > return false;
> > });
> > return true;
> > });
> >
> > JumpStart's code you linked disables the button itself, which is an
> easier
> > way of showing how to write a mixin that uses JavaScript, while the one
> > above disables the second form submission itself.
> >
> >
> > --
> > Thiago H. de Paula Figueiredo
> > Tapestry, Java and Hibernate consultant and developer
> > http://machina.com.br
> >
> > ---------------------------------------------------------------------
> > To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> > For additional commands, e-mail: users-help@tapestry.apache.org
> >
>
>
>
> --
> Best Regards
> Harry Zhou
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Prevent double or more submissions.
Posted by Harry Zhou <su...@gmail.com>.
Below is the source of a ClickOnce mixin I wrote for 5.4. Hopefully
it helps. Note that the mixin should be applied to a <form> element.
1. Trivial java class
package some.package.name.mixins; // Insert package name. That
"mixins" has to be there.
import org.apache.tapestry5.ClientElement;
import org.apache.tapestry5.annotations.InjectContainer;
import org.apache.tapestry5.annotations.MixinAfter;
import org.apache.tapestry5.ioc.annotations.Inject;
import org.apache.tapestry5.services.javascript.JavaScriptSupport;
@MixinAfter
public class ClickOnce {
@Inject
private JavaScriptSupport javaScriptSupport;
@InjectContainer
private ClientElement clientElement;
public void afterRender() {
javaScriptSupport.require("clickOnce").with("#" + clientElement.getClientId());
}
}
2. JavaScript. "clickOnce.js" should be a javascript file under the
folder: src / main / resources / META-INF / modules /
define(["jquery"], function($) {
return function(elementId) {
$(elementId).on("click", function(e) {
var element = $(this);
if(element.data("clicked") == true) {
element.prop("disabled", true);
e.preventDefault();
} else {
element.data("clicked", true);
if(element.is("a")) {
element.text("One moment ..."); // Change "One moment ..." to
whatever prompt you like; use message catalogue for i18n.
element.addClass("disabled");
} else {
element.val("One moment ...");
}
}
});
}
})
That "e.preventDefault()" stops the form from emitting a submission event.
3. Like all JavaScript solutions, the above wouldn't work if
JavaScript is somehow disabled in the user browser, and can be
bypassed. For server-end prevention of double-clicking, implement a
token system that stores a random token in both session and as a
hidden field (using <t:hidden>, etc.) in the form. The token in
session gets immediately removed upon first use (token redemption).
Subsequent token redemption for the same token should be ignored.
This comes with the additional benefit of CSRF prevention.
On Mon, Dec 1, 2014 at 1:26 PM, Thiago H de Paula Figueiredo
<th...@gmail.com> wrote:
> On Mon, 01 Dec 2014 16:05:02 -0200, Charlouze <me...@charlouze.com> wrote:
>
>> I'm not sure to understand what you mean... jumpstart example uses plain
>> old js and does not work with tapestry client-side validation.
>
>
> I mean something like
> http://stackoverflow.com/questions/926816/how-to-prevent-form-from-submitting-multiple-times-from-client-side.
>
> $("form").submit(function() {
> $(this).submit(function() {
> return false;
> });
> return true;
> });
>
> JumpStart's code you linked disables the button itself, which is an easier
> way of showing how to write a mixin that uses JavaScript, while the one
> above disables the second form submission itself.
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
--
Best Regards
Harry Zhou
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Prevent double or more submissions.
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
On Mon, 01 Dec 2014 16:05:02 -0200, Charlouze <me...@charlouze.com> wrote:
> I'm not sure to understand what you mean... jumpstart example uses plain
> old js and does not work with tapestry client-side validation.
I mean something like
http://stackoverflow.com/questions/926816/how-to-prevent-form-from-submitting-multiple-times-from-client-side.
$("form").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});
JumpStart's code you linked disables the button itself, which is an easier
way of showing how to write a mixin that uses JavaScript, while the one
above disables the second form submission itself.
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org
Re: Prevent double or more submissions.
Posted by Charlouze <me...@charlouze.com>.
I'm not sure to understand what you mean... jumpstart example uses plain
old js and does not work with tapestry client-side validation.
2014-12-01 18:59 GMT+01:00 Thiago H de Paula Figueiredo <th...@gmail.com>
:
> Have you tried plain old JavaScript double form submission avoiding?
> Anyway, you don't need to override anything from Tapestry's JS for that at
> all.
>
> On Mon, 01 Dec 2014 15:38:14 -0200, Charlouze <me...@charlouze.com> wrote:
>
> Hey tapestry's users/gurus !
>>
>> I need a way to prevent double form submission. I first had a look at this
>> example
>> <http://jumpstart.doublenegative.com.au/jumpstart7/examples/
>> javascript/creatingmixins1>
>> from jumpstart. As it is written, it conflicts with client-side form
>> validation and I also need client side form validation.
>> I dug into tapestry JS source and found that there was some events called
>> after validation. At first, I was happy but then I realize that there was
>> a
>> validate event only if validation succed and in my case I need a way to
>> know if validation failed (in order to re-enable the button).
>>
>> I'm thinking about overriding t5/core/forms.coffee with my own but I don't
>> like to do that. That's why i'm asking : Does someone know a better way
>> for
>> doing this ?
>>
>> Thanks in advance,
>> Charles.
>>
>
>
> --
> Thiago H. de Paula Figueiredo
> Tapestry, Java and Hibernate consultant and developer
> http://machina.com.br
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>
>
Re: Prevent double or more submissions.
Posted by Thiago H de Paula Figueiredo <th...@gmail.com>.
Have you tried plain old JavaScript double form submission avoiding?
Anyway, you don't need to override anything from Tapestry's JS for that at
all.
On Mon, 01 Dec 2014 15:38:14 -0200, Charlouze <me...@charlouze.com> wrote:
> Hey tapestry's users/gurus !
>
> I need a way to prevent double form submission. I first had a look at
> this
> example
> <http://jumpstart.doublenegative.com.au/jumpstart7/examples/javascript/creatingmixins1>
> from jumpstart. As it is written, it conflicts with client-side form
> validation and I also need client side form validation.
> I dug into tapestry JS source and found that there was some events called
> after validation. At first, I was happy but then I realize that there
> was a
> validate event only if validation succed and in my case I need a way to
> know if validation failed (in order to re-enable the button).
>
> I'm thinking about overriding t5/core/forms.coffee with my own but I
> don't
> like to do that. That's why i'm asking : Does someone know a better way
> for
> doing this ?
>
> Thanks in advance,
> Charles.
--
Thiago H. de Paula Figueiredo
Tapestry, Java and Hibernate consultant and developer
http://machina.com.br
---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org