1

I am using jsf and liferay. I am very new to it. For any javascript method which select any element of jsf for some javascript or jquery method I need to set it like.

<h:inputText id="abc" binding="#{abc}"/>

Please note that I have set binding same as id, somebody has told me to do like that. Without setting binding like that I was not able to select any element in my javascript method. I really dont know the reason. Since this was working for me so I have used it, without going in detail

But now for some functionality I really need actual use of binding, bind UIInput to managed bean. So I have changed my tag like.

<h:inputText id="abc" binding="#{mybean.uiAbc}"/>

In this case my javascript method like

function doSomething(){
    $("##{abc.clientId}").val("hello everyone");
}

its not working. Its giving me exception like... # is undefined..

In javascript I have nothing to do with binding so why it stops working now? And why it was working earlier with same value of binding as id have?

Kush Sahu
  • 399
  • 1
  • 13
  • 33
  • `$("##{abc.clientId}").val("hello everyone")` from remove `#` should be like `$("#{abc.clientId}").val("hello everyone");` and preferred way to set Input values in `$('formId\\:componentId').val(value)` – SRy Mar 29 '13 at 21:01
  • jsf will render its id and using ## will give me id in javascript like $("#j_id1942217253_73c3e264:abc").val("uyz"); . – Kush Sahu Mar 29 '13 at 21:39

2 Answers2

2

If you replace binding="#{abc}" by binding="#{myBean.uiAbc}", then you should obviously also change #{abc.clientId} elsewhere in the view by #{myBean.uiAbc.clientId}.

function doSomething(){
    $("##{myBean.uiAbc.clientId}").val("hello everyone");
}

That the id and binding need have to be the same name is complete nonsense.

The only problem which you may face is that the default JSF naming container separator character, :, is a special character in CSS selectors, like as used in jQuery, and thus this construct would possibly fail. This construct would only work if you've manually reconfigured your JSF webapp to use a different, CSS-safe, character like - or _. If you indeed use the default of :, then you should use

function doSomething(){
    $("[id='#{myBean.uiAbc.clientId}']").val("hello everyone");
}

See also:

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks for your ans... Ya its a nonsense but why it was working before and not now when I have changed binding? I have not changed anything except binding. :( – Kush Sahu Mar 30 '13 at 19:31
  • It's likely caused because you mixed `id` with `binding` and incorrectly assumed that the component referenced by `` would be available by `#{foo}` instead of `#{bar}`. This is not true. It's available by `#{bar}` and the `id` is not required for that. – BalusC Mar 30 '13 at 20:48
  • Ya I was wrong... I also just found it in your diff ans http://stackoverflow.com/questions/8336783/how-do-i-break-the-tyranny-of-the-clientid and http://stackoverflow.com/questions/8168302/jsf-component-binding-without-bean-property and also through http://illegalargumentexception.blogspot.in/2009/10/jsf-working-with-component-identifiers.html . Thanks BalusC for your explaination and for ans. I really appreciate your help :) – Kush Sahu Mar 30 '13 at 20:54
  • I think you should write a book over JSF. I would love it. :) :) :) – Kush Sahu Mar 30 '13 at 20:57
0

Your myth for following is wrong, i.e. to have same id and binding attribute. 

id="abc" binding="#{abc}"

JSF renders component with id which provided by us with preceding by form id. e.g. in your case it will be,

:formId:abc

to avoid prepending form id just set prependId attribute to false. it will render the component with id "abc" only.

Also if your component is naming container e.g. dataTable. Then you the method accessing client id is different.

In short just right click in your browser and check the element's id and you can find the id to the jQuery.

Jitesh
  • 1,384
  • 10
  • 20