Dojo Event Handler

2
Hi, I need a Dojo/Javascript expert in Mendix below: I'm trying to fire off the event handler of a search button when an input field has the Enter key pressed. The search button works with a mouse click but not when firing off the event handler via Dojo/Javascript. The button is a DIV that has a "mousedown" event listener. I assume this is what is causing the form fields to validate and submit. I've assigned the class "formsubmit" in the modeler to the button so I can retrieve the ID attribute and trigger the "mousedown" event. In Firefox I'm trying out the following code, which should fire off the "mousedown" event on my search button: evt = document.createEvent("HTMLEvents"); evt.initEvent("mousedown", true, true); buttonid = dojo.query(".formsubmit").attr("id")[0]; document.getElementById(buttonid).dispatchEvent(evt); However, it's not working and I think Mendix is doing something else tricky in the background as I've noticed "click" handlers on BODY tag. I have the Dojo part working for the Enter key on the input field but I can't seem to figure out how to make the "mousedown" event on the button work. It simply doesn't respond, while a mouse click works fine. Please be advised I have tried the "click" event but it's not an event supported by the DIV tag and there is no "click" listener on the button anyways. Can anyone advise how I can fire off the "mousedown" event properly on the button? FYI, I have been able to add a new "mousedown" event to the button and fire it off and it works. I just can't seem to fire off the assigned listener that already exists on the button. Thank you!! Anthony
asked
4 answers
4

The way Mendix handles clicks on a button is a bit complicated. Below you can find a snippet from a hotkey widget that we made, which should appear in the appstore in the not to far future.

The trick is to call the action method on the button that you would like to click.

// retrieve the button using a CSS selector. this.selector is a selector string, e.q. ".search-button"
var button = dojo.query(this.selector)[0];
// retrieve the dijit widget that belongs to this button
var widget = dijit.byId(button.id);
// execute the action that is triggert when a user clicks the button
// if the button is a datagrid buttont the action method expects a parameter
widget.action({
   currentTarget : widget.domNode
});

Hop this helps, if you have questions about it, let me know.

Kilian Croese, Capgemini

answered
1

You don't need the two-step finding of the button. dojo.query(".formsubmit").dispatchEvent(evt) should work.

try "click" instead of "mousedown"

answered
0

Actually, I could just do dojo.query(".formsubmit")[0].dispatchEvent(evt);

But the reason I grabbed the Id is because query returns an array of results so you can't dispatchEvent()

Again, it still doesn't work. Also there is no click event on the DIV element. The event is on mousedown when I actually click on the button.

answered
0

I even tried to focus on the button and simulate the Enter key but it doesn't work either! What is preventing this from working:

//Focus - works!
buttonid = dojo.query(".formsubmit").attr("id")[0];
document.getElementById(buttonid).focus();

//Create Enter event
evt1 = document.createEvent("KeyboardEvent");
evt1.initEvent("keydown", true, true, window, false, false, false, false, 13, 0);

//Execute - doesn't work!
document.getElementById(buttonid).dispatchEvent(evt1);

The ".formsubmit" button has a keyup/keydown event so I have no idea why those won't trigger either.

answered