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

回答1:

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/

回答2:

Could you assign a class to the text box and then simply use the class selector to bind your paste event?

<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));
}

Simple example on jsfiddle.

回答3:

Have you tried settig prependId as false.

form id="myForm" prependId="false"

来源：https://stackoverflow.com/questions/5183523/binding-events-based-on-id-with-jsf-and-jquery

标签

jquery

jsf

richfaces