Cannot pickup id with JQuery for the JSF textarea

Question

Hello everybody

I have a little problem I am trying to use MartkItUp JQuery rich text editor on JSF textarea component. MY form looks pretty much like this:

 <h:form id="comment">

                    <h:inputTextarea id="commentBody" cols="10" rows="10" value="#{postComment.commentBody}" required="true" requiredMessage="Comment Body is reqguired" >
                        <f:validateLength maximum="500" minimum="2" />
                    </h:inputTextarea>
                <%-- more of the form... %-->

The problem is that on output it gives me the id for textarea like that

id="comment:commentBody"

But when i try in JQuery to point to it

$('#comment:commentBody').markItUp(mySettings);

nothing happens. I had a plain textarea before and there was no problem. But now, i am lots.

How do I point to id in JQuery, thats looks like comment:commentBody

Thanks in advance.

P.S: I know i can point to this text area by $('textarea').markItUp(mySettings); however i am looking for solution to point to specific text area by it's ID.

Answer 1

try this:

$("textarea[id$='commentBody']").markItUp(mySettings);

this will select text area having ID ending with commentBody.

to select control with ID starting with particular string replace $ with ^

Answer 2

Try this, $('#comment\\:commentBody'), for version 1.1.3 or greater.

Answer 3

You can read about JSF IDs here, but in this case you may also find the h:form prependId attribute useful.