By Karthikeyan

2011-10-28 09:53:22 8 Comments

I am trying to implement jQuery with PrimeFaces and JSF components, but it's not working properly. When I tried to do the same with HTML tags it;s working properly.

Here is the code with HTML tags which works properly with jQuery:

<input type="checkbox" id="check2"></input>
<h:outputText value="Check the box, if your permanent address is as same as current address."></h:outputText> 
<h:message for="checkbox" style="color:red" />


$("#check2").change(function() {
    if ($("#check2").is(":checked")) {
    } else {

Here is the code with PrimeFaces/JSF which doesn't work properly with jQuery:

<p:selectManyCheckbox >
    <f:selectItem itemLabel="1" value="one" id="rad" ></f:selectItem>


$("#rad").change(function() {
    if ($("#rad:checked").val() == "one") {
    } else {


@nndru 2017-09-28 10:16:07

If you're using RichFaces you can check rich:jQuery comonent. It allows you to specify server side id for jQuery component. For example, you have component with specified server id, then you can apply any jQuery related stuff to in next way:

<rich:jQuery selector="#<server-side-component-id>" query="find('.some-child').removeProp('style')"/>

For more info, please check doumentation.

Hope it helps.

@BalusC 2011-10-28 10:53:06

You should realize that jQuery works with the HTML DOM tree in the client side. jQuery doesn't work directly on JSF components as you've written in the JSF source code, but jQuery works directly with the HTML DOM tree which is generated by those JSF components. You need to open the page in webbrowser and rightclick and then View Source. You'll see that JSF prepends the ID of the generated HTML input elements with the IDs of all parent NamingContainer components (such as <h:form>, <h:dataTable>, etc) with : as default separator character. So for example

<h:form id="foo">
    <p:selectManyCheckbox id="bar" />

will end up in generated HTML as

<form id="foo" name="foo">
    <input type="checkbox" id="foo:bar" name="foo:bar" />

You need to select elements by exactly that ID instead. The : is however a special character in CSS identifiers representing a pseudo selector. To select an element with a : in the ID using CSS selectors in jQuery, you need to either escape it by backslash or to use the [id=...] attribute selector or just use the old getElementById():

var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));

If you see an autogenerated j_idXXX part in the ID where XXX represents an incremental number, then you must give the particular component a fixed ID, because the incremental number is dynamic and is subject to changes depending on component's physical position in the tree.

As an alternative, you can also just use a class name:

<x:someInputComponent styleClass="someClassName" />

which ends up in HTML as

<input type="..." class="someClassName" />

so that you can get it as

var $elements = $(".someClassName");

This allows for better abstraction and reusability. Surely those kind of elements are not unique. Only the main layout elements like header, menu, content and footer are really unique, but they are in turn usually not in a NamingContainer already.

As again another alternative, you could just pass the HTML DOM element itself into the function:

<x:someComponent onclick="someFunction(this)" />
function someFunction(element) {
    var $element = $(element);
    // ...

See also:

@umang naik 2016-02-02 07:12:36

enter image description here look this will help you when i select experience=Yes my dialoguebox which id is dlg3 is popup.and if value is No it will not open

@Daniel 2011-10-28 15:56:07

You also can use the jQuery "Attribute Contains Selector" (here is the url

For example If you have a

 <p:spinner id="quantity" value="#{toBuyBean.quantityToAdd}" min="0"/> 

and you want to do something on its object you can select it with


and if you want to print its value you can do this


In order to know the real html tag of the element you can always look at the real html element (in this case spinner was translated into input) using firebug or ie developer tools or view source...


@Andrew 2017-04-19 18:13:25

Great find! Even better, you can use the "Attribute Ends With Selector": which looks like this in PrimeFaces: "@(*[id$='IDUsedInPrimeFaces'])" (This will allow you to select a component with id="IDUsedInPrimeFaces", even when its client ID will be something more like id="form:IDUsedInPrimeFaces".)

Related Questions

Sponsored Content

41 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

41 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 737317 View
  • 2726 Score
  • 41 Answer
  • Tags:   javascript jquery

57 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

34 Answered Questions

37 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

66 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

36 Answered Questions

27 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

13 Answered Questions

[SOLVED] How can I select an element with multiple classes in jQuery?

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

Sponsored Content