Search code examples
jqueryjsfrichfaces

Binding events based on ID with JSF and jQuery

I'm having an issue with JQuery and JSF/Richfaces. I have an inputText component inside a form component.

<h:form id="myForm">
<h:inputText id="myInputField" value="#{myBean.sampleName}" />


I have the following jQuery code:

MySite.supplier= function() {

  // Only attach event listener if the element exists on page
  if ( jQuery('#myInputField') ) {
    jQuery('#myInputField').bind('paste', MySite.common.handleMousePaste.bind(this));
  }

};

MySite.common.handleMousePaste = function(event) {

  // Need to put a tiny delay in so the element has time to get the pasted n content.
  setTimeout(function() { jQuery("#" + event.target.id).keyup(); }, 10);
};


The problem is the way my inputField is rendered. It gets the form name added to it and looks like this:

myForm:myInputField


So my current jQuery code will not find the ID to bind to.

The reason I do not reference it with full form name jQuery('#myForm\\:myInputField') is because I have a field called 'myInputField' in multiple locations throughout the site (Once on each page)

Has anyone any solutions to bind to the ID correctly in the 'MySite.supplier' method as well as in the 'MySite.supplier' method where I have event.target.id?

Thanks

Solution

  • The awesomeness of the naming container in JSF. When I was playing with this kind of thing, I used jQuery's endsWith selector ( the '$=' in the following code ).

    jQuery('input[id$="myInputField"]')

    http://api.jquery.com/attribute-ends-with-selector/