How to select JSF components using jQuery? -
i trying implement jquery primefaces , jsf components, it's not working properly. when tried same html tags it;s working properly.
here code html tags works jquery:
<input type="checkbox" id="check2"></input> <h:outputtext value="check box, if permanent address same current address."></h:outputtext> <h:message for="checkbox" style="color:red" /> with
$("#check2").change(function() { if ($("#check2").is(":checked")) { $("#p2").hide(); } else { $("#p2").show(); } }); here code primefaces/jsf doesn't work jquery:
<p:selectmanycheckbox > <f:selectitem itemlabel="1" value="one" id="rad" ></f:selectitem> </p:selectmanycheckbox> with
$("#rad").change(function() { if ($("#rad:checked").val() == "one") { $("#p2").hide(); } else { $("#p2").show(); } });
you should realize jquery works html dom tree in client side. jquery doesn't work directly on jsf components you've written in jsf source code, jquery works directly html dom tree generated jsf components. need open page in webbrowser , rightclick , view source. you'll see jsf prepends id of generated html input elements ids of parent namingcontainer components (such <h:form>, <h:datatable>, etc) : default separator character. example
<h:form id="foo"> <p:selectmanycheckbox id="bar" /> ... will end in generated html as
<form id="foo" name="foo"> <input type="checkbox" id="foo:bar" name="foo:bar" /> ... you need select elements exactly id instead. : special character in css identifiers representing pseudo selector. select element : in id using css selectors in jquery, need either escape backslash or use [id=...] attribute selector or use old getelementbyid():
var $element1 = $("#foo\\:bar"); // or var $element2 = $("[id='foo:bar']"); // or var $element3 = $(document.getelementbyid("foo:bar")); if see autogenerated j_idxxx part in id xxx represents incremental number, must give particular component fixed id, because incremental number dynamic , subject changes depending on component's physical position in tree.
as alternative, can use class name:
<x:someinputcomponent styleclass="someclassname" /> which ends in html as
<input type="..." class="someclassname" /> so can as
var $elements = $(".someclassname"); this allows better abstraction , reusability. surely kind of elements not unique. main layout elements header, menu, content , footer unique, in turn not in namingcontainer already.
as again alternative, pass html dom element function:
<x:somecomponent onclick="somefunction(this)" /> function somefunction(element) { var $element = $(element); // ... }
Comments
Post a Comment