You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@tapestry.apache.org by Bob Harner <bo...@gmail.com> on 2013/03/09 13:42:54 UTC

Triggering a form submission via JavaScript in 5.4-alpha2

Has anyone figured out how to trigger a form submission using
JavaScript in Tapestry 5.4?

In 5.3 I was able to do this:

    this.form.fire(Tapestry.FORM_PROCESS_SUBMIT_EVENT)

but that does nothing under 5.4.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Bob Harner <bo...@gmail.com>.
Cool, thanks!

I'm starting to build up some content for 5.4 documentation updates,
and all this goes in there.

On Sun, Mar 10, 2013 at 9:36 PM, Steve Eynon
<st...@alienfactory.co.uk> wrote:
> Yeah, sometimes quick fixes, well, aren't!
>
> But cool. As you're using Zones I'll mention another trick...
>
> If you put the event handler on the document, or some parent element
> that doesn't get updated, then you don't have to re-apply the event
> handler on every zone / ajax update.
>
> e.g. the following will submit the form on all select change events
> and you only ever need to call jsSupport.require() once when the page
> loads:
>
> define ["t5/core/dom"], (t5) ->
>   return ->
>     t5.onDocument "change", "select", (e) ->
>       form = this.findParent("form")
>       form.trigger "submit"
>
> Steve.
>
>
> On 11 March 2013 09:06, Bob Harner <bo...@gmail.com> wrote:
>> Steve,
>>
>> Yeah, I hadn't gotten around to switching this code to unobtrusive
>> JavaScript yet and was hoping for a quick substitute.
>>
>> Your code did the trick, it works perfectly.
>>
>> Of course, I'll still need to adjust the module to set up a additional
>> event handlers for other events, but I guess I can figure that out
>> (i.e. Initialize#invoke(String)) now that you've given me a good
>> start.
>>
>> Thanks!
>>
>> On Sun, Mar 10, 2013 at 8:28 PM, Steve Eynon
>> <st...@alienfactory.co.uk> wrote:
>>> Oh, I see - you have inline javascript in the onchange handler. I
>>> don't think that's going to work - you need to wrap the element in T5s
>>> core DOM which is defined by RequireJS:
>>>
>>> http://people.apache.org/~hlship/t5api/coffeescript/t5-core-dom-prototype.html
>>>
>>> Do this instead:
>>>
>>> /META-INF/modules/formSubmitter.js
>>>
>>> define(["t5/core/dom"], function(t5) {
>>>   return function(selectClientId) {
>>>     return t5(selectClientId).on('change', function(e) {
>>>       var form = this.findParent("form");
>>>       return form.trigger("submit");
>>>     });
>>>   };
>>> });
>>>
>>> Or use CoffeeScript:
>>>
>>> /META-INF/modules/formSubmitter.coffee
>>>
>>> define ["t5/core/dom"], (t5) ->
>>>         return (selectClientId) ->
>>>                 t5(selectClientId).on 'change', (e) ->
>>>                         form = this.findParent("form")
>>>                         form.trigger "submit"
>>>
>>> Then in a render phase method in your component / page:
>>>
>>>     jsSupport.require("formSubmitter").with(select.getClientId());
>>>
>>> Steve.
>>>
>>>
>>> On 11 March 2013 02:32, Lenny Primak <lp...@hope.nyc.ny.us> wrote:
>>>> In 5.3, you had to do setSubmittingElement().  Not sure if this applies still in 5.4, but if it does,
>>>> it will need to be called.
>>>>
>>>> On Mar 10, 2013, at 1:39 PM, Lance Java wrote:
>>>>
>>>>> You need to fire the "click" event on the submit button, not "submit".
>>>>>
>>>
>>> ---------------------------------------------------------------------
>>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>>> For additional commands, e-mail: users-help@tapestry.apache.org
>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Steve Eynon <st...@alienfactory.co.uk>.
Yeah, sometimes quick fixes, well, aren't!

But cool. As you're using Zones I'll mention another trick...

If you put the event handler on the document, or some parent element
that doesn't get updated, then you don't have to re-apply the event
handler on every zone / ajax update.

e.g. the following will submit the form on all select change events
and you only ever need to call jsSupport.require() once when the page
loads:

define ["t5/core/dom"], (t5) ->
  return ->
    t5.onDocument "change", "select", (e) ->
      form = this.findParent("form")
      form.trigger "submit"

Steve.


On 11 March 2013 09:06, Bob Harner <bo...@gmail.com> wrote:
> Steve,
>
> Yeah, I hadn't gotten around to switching this code to unobtrusive
> JavaScript yet and was hoping for a quick substitute.
>
> Your code did the trick, it works perfectly.
>
> Of course, I'll still need to adjust the module to set up a additional
> event handlers for other events, but I guess I can figure that out
> (i.e. Initialize#invoke(String)) now that you've given me a good
> start.
>
> Thanks!
>
> On Sun, Mar 10, 2013 at 8:28 PM, Steve Eynon
> <st...@alienfactory.co.uk> wrote:
>> Oh, I see - you have inline javascript in the onchange handler. I
>> don't think that's going to work - you need to wrap the element in T5s
>> core DOM which is defined by RequireJS:
>>
>> http://people.apache.org/~hlship/t5api/coffeescript/t5-core-dom-prototype.html
>>
>> Do this instead:
>>
>> /META-INF/modules/formSubmitter.js
>>
>> define(["t5/core/dom"], function(t5) {
>>   return function(selectClientId) {
>>     return t5(selectClientId).on('change', function(e) {
>>       var form = this.findParent("form");
>>       return form.trigger("submit");
>>     });
>>   };
>> });
>>
>> Or use CoffeeScript:
>>
>> /META-INF/modules/formSubmitter.coffee
>>
>> define ["t5/core/dom"], (t5) ->
>>         return (selectClientId) ->
>>                 t5(selectClientId).on 'change', (e) ->
>>                         form = this.findParent("form")
>>                         form.trigger "submit"
>>
>> Then in a render phase method in your component / page:
>>
>>     jsSupport.require("formSubmitter").with(select.getClientId());
>>
>> Steve.
>>
>>
>> On 11 March 2013 02:32, Lenny Primak <lp...@hope.nyc.ny.us> wrote:
>>> In 5.3, you had to do setSubmittingElement().  Not sure if this applies still in 5.4, but if it does,
>>> it will need to be called.
>>>
>>> On Mar 10, 2013, at 1:39 PM, Lance Java wrote:
>>>
>>>> You need to fire the "click" event on the submit button, not "submit".
>>>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
>> For additional commands, e-mail: users-help@tapestry.apache.org
>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Bob Harner <bo...@gmail.com>.
Steve,

Yeah, I hadn't gotten around to switching this code to unobtrusive
JavaScript yet and was hoping for a quick substitute.

Your code did the trick, it works perfectly.

Of course, I'll still need to adjust the module to set up a additional
event handlers for other events, but I guess I can figure that out
(i.e. Initialize#invoke(String)) now that you've given me a good
start.

Thanks!

On Sun, Mar 10, 2013 at 8:28 PM, Steve Eynon
<st...@alienfactory.co.uk> wrote:
> Oh, I see - you have inline javascript in the onchange handler. I
> don't think that's going to work - you need to wrap the element in T5s
> core DOM which is defined by RequireJS:
>
> http://people.apache.org/~hlship/t5api/coffeescript/t5-core-dom-prototype.html
>
> Do this instead:
>
> /META-INF/modules/formSubmitter.js
>
> define(["t5/core/dom"], function(t5) {
>   return function(selectClientId) {
>     return t5(selectClientId).on('change', function(e) {
>       var form = this.findParent("form");
>       return form.trigger("submit");
>     });
>   };
> });
>
> Or use CoffeeScript:
>
> /META-INF/modules/formSubmitter.coffee
>
> define ["t5/core/dom"], (t5) ->
>         return (selectClientId) ->
>                 t5(selectClientId).on 'change', (e) ->
>                         form = this.findParent("form")
>                         form.trigger "submit"
>
> Then in a render phase method in your component / page:
>
>     jsSupport.require("formSubmitter").with(select.getClientId());
>
> Steve.
>
>
> On 11 March 2013 02:32, Lenny Primak <lp...@hope.nyc.ny.us> wrote:
>> In 5.3, you had to do setSubmittingElement().  Not sure if this applies still in 5.4, but if it does,
>> it will need to be called.
>>
>> On Mar 10, 2013, at 1:39 PM, Lance Java wrote:
>>
>>> You need to fire the "click" event on the submit button, not "submit".
>>>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Steve Eynon <st...@alienfactory.co.uk>.
Oh, I see - you have inline javascript in the onchange handler. I
don't think that's going to work - you need to wrap the element in T5s
core DOM which is defined by RequireJS:

http://people.apache.org/~hlship/t5api/coffeescript/t5-core-dom-prototype.html

Do this instead:

/META-INF/modules/formSubmitter.js

define(["t5/core/dom"], function(t5) {
  return function(selectClientId) {
    return t5(selectClientId).on('change', function(e) {
      var form = this.findParent("form");
      return form.trigger("submit");
    });
  };
});

Or use CoffeeScript:

/META-INF/modules/formSubmitter.coffee

define ["t5/core/dom"], (t5) ->
	return (selectClientId) ->
		t5(selectClientId).on 'change', (e) ->
			form = this.findParent("form")
			form.trigger "submit"

Then in a render phase method in your component / page:

    jsSupport.require("formSubmitter").with(select.getClientId());

Steve.


On 11 March 2013 02:32, Lenny Primak <lp...@hope.nyc.ny.us> wrote:
> In 5.3, you had to do setSubmittingElement().  Not sure if this applies still in 5.4, but if it does,
> it will need to be called.
>
> On Mar 10, 2013, at 1:39 PM, Lance Java wrote:
>
>> You need to fire the "click" event on the submit button, not "submit".
>>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Lenny Primak <lp...@hope.nyc.ny.us>.
In 5.3, you had to do setSubmittingElement().  Not sure if this applies still in 5.4, but if it does,
it will need to be called.

On Mar 10, 2013, at 1:39 PM, Lance Java wrote:

> You need to fire the "click" event on the submit button, not "submit". 
> 
> 
> 
> --
> View this message in context: http://tapestry.1045711.n5.nabble.com/Triggering-a-form-submission-via-JavaScript-in-5-4-alpha2-tp5720381p5720404.html
> Sent from the Tapestry - User mailing list archive at Nabble.com.
> 
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
> 


---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Lance Java <la...@googlemail.com>.
You need to fire the "click" event on the submit button, not "submit". 



--
View this message in context: http://tapestry.1045711.n5.nabble.com/Triggering-a-form-submission-via-JavaScript-in-5-4-alpha2-tp5720381p5720404.html
Sent from the Tapestry - User mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Bob Harner <bo...@gmail.com>.
Still no progress on this.

I forgot to mention that this is with a zone.

@Lance: I rendered a submit button (not hidden, for now):

<t:form ... zone="listZone">
<t:submit t:id="categorySubmit" id="categorySubmit" value="Go"/>
</t:form>

and then

<t:select .... onchange="console.log("onchange executing.");
document.getElementById('categorySubmit').fire('submit')" />

The JavaScript console shows the 'onchange executing." output but
nothing else happens (and no errors).

@Steve

Tried  this.form.fire("submit"), with no change. Still nothing happens.

On Sat, Mar 9, 2013 at 12:42 PM, Steve Eynon
<st...@alienfactory.co.uk> wrote:
> Try this:
>
>       this.form.fire("submit")
>
> I've not tried it, but I was looking at:
> http://people.apache.org/~hlship/t5api/coffeescript/forms.html
>
> Steve.
> -------------------------------
> "If at first you don't succeed,
>    so much for skydiving!"
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
> For additional commands, e-mail: users-help@tapestry.apache.org
>

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Steve Eynon <st...@alienfactory.co.uk>.
Try this:

      this.form.fire("submit")

I've not tried it, but I was looking at:
http://people.apache.org/~hlship/t5api/coffeescript/forms.html

Steve.
-------------------------------
"If at first you don't succeed,
   so much for skydiving!"

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org


Re: Triggering a form submission via JavaScript in 5.4-alpha2

Posted by Lance Java <la...@googlemail.com>.
You could render a hidden submit button and fire the click() event on it



--
View this message in context: http://tapestry.1045711.n5.nabble.com/Triggering-a-form-submission-via-JavaScript-in-5-4-alpha2-tp5720381p5720383.html
Sent from the Tapestry - User mailing list archive at Nabble.com.

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@tapestry.apache.org
For additional commands, e-mail: users-help@tapestry.apache.org