How to pass a component to a javascript function?

I am trying to manage keyboard events using the Mousetrap library as suggested by David here.

My goal is to have one keyboard event handler on the main form and one keyboard handler on any other form that might be either loaded on a container of the main form or on an alert. Each handler should process its keystrokes and leave the unprocessed ones bubbling up to the parent forms.

I found a way that allows a javascript function to identify a form: put an invisible label with a unique text inside a form, then use:

component = $('span:contains(' + uniqueText + ')')[0];
anvil.call(component, callbackName, keyInfo);

Unfortunately this trick works if the label is inside a form with the HTML property, but doesn’t work with templates without HTML property.

I think I am giving up, too many problems:

  • Javascript can only call methods of the main form
  • If the same keystroke is handled by two forms, the result is unpredictable (sometimes the parent’s event handler is executed, sometimes the child’s)
  • Difficult to know which component has the focus
  • Form methods executed from javascript can’t use the print function (not a big deal, just annoying)

I will go the less fancy way: use Mousetrap only from the main form and use some global status variable to keep track of where is the focus and tell MainForm.keypress what’s going on.

Any plan to add keyboard events?