Identity Based Binding Events with JSF and jQuery

Question

I have a problem 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 how my inputField is displayed. It gets the added form name and looks like this:

myForm:myInputField

Therefore, my current jQuery code will not find the identifier for the binding.

The reason I don't link to it with the full name of the jQuery form ('# myForm \\: myInputField') is because I have a field called myInputField in several places throughout the site (once on each page)

Are there any solutions for binding to ID correctly in the "MySite.supplier" method, as well as in the "MySite.supplier" method, where I have event.target.id?

Answer 1

JSF. , jQuery ( "$ =" ).

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

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

Answer 2

, ?

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

if ( jQuery('.bindPaste') ) {
    jQuery('.bindPaste').bind('paste', MySite.common.handleMousePaste.bind(this));
}

jsfiddle.

Answer 3

You tried setting prependId to false.

form id = "myForm" prependId = "false"