javascriptextjsdom-eventsextjs3tapestry

How can I trigger an element's default event within an event handler?


I have an HTML button that needs to check several conditions, and if they pass allow the default action to occur.

The following works in Firefox, but it fails in IE. I setup a click handler on the button:

Ext.get('send').on('click', handleSend, this, {
    preventDefault: true
});

which pops up one of several message boxes if one of the conditions isn't met. If all conditions are met, I remove the click listener from the button and click the button again:

Ext.get('send').un('click', handleSend, this);

Ext.getDom('send').click();

As far as I can tell, it fails in IE (and possibly other browsers) because click() isn't a standard function for a DOM element.

If the default action were a simple form submit, I could just do that after the checks pass, but we're using Tapestry 4 with a listener, which doesn't get executed on a normal form submit.

I've tried submitting the form with

tapestry.form.submit('composeForm', 'doSend');

but the doSend listener isn't getting called.

Conditionally allowing the default event is the best solution I've come up with, but there are a couple of options that may be possible:

  1. Is there some other way to cause a Tapestry 4 listener to be fired from within Javascript?
  2. Is there any way to recognize the normal form submit in my Tapestry Page and thereby trigger the listener?

JSFiddle added

In this jsfiddle, the default action is to submit the form; this is prevented when the checkbox is unchecked. When checked it removes the handler, but the call to click() doesn't work in IE.

Is there a way to simulate a click in IE?

Update

Another snag in the problem is that I have to display an 'are you sure' dialog, so in order to give them time to answer, the event has to be stopped. If they click OK, the default action needs to occur. JSFiddle doesn't seem to have ExtJS widgets like MessageBox, so I'm not sure how to demo this behavior.

At @Ivan's suggestion I tried

Ext.getDom('send').fireEvent('onclick');

but it returns false, meaning the event is being cancelled somewhere. I then tried

var evt = document.createEvent("Event");
evt.initEvent('click', false, false);
var cancelled = Ext.getDom('send').fireEvent('onclick', evt);

but IE9 says that document.createEvent doesn't exist, even though this is how MSDN says to do it.


Solution

  • There's a listener parameter on Form components; from the Tapestry 4 doc:

    Default listener to be invoked when the form is submitted. Invoked only if another listener (success, cancel or refresh) is not invoked.

    Setting this parameter to my listener method like so:

    <binding name="listener" value="listener:doSend" />
    

    causes a Tapestry form submit

    tapestry.form.submit('myFormId');
    

    to trigger the listener.