JQUERY not working with JSF

Question

I'm using JSF 2.0 and JQUERY 1.9. I'm trying to add an attribute to a component, but when the page is rendered, the attribute is not added.

Here is the jsf code for the component.

  <h:form id="mainForm">
        <h:inputText id="field" value="#{bean.value}"/>
    </h:form>

and the jquery is like this:

<script type="text/javascript">
// <![CDATA[
    window.onload=function(){
        $("#mainForm:field").attr("placeholder","Fill me");
    }
// <![CDATA[
</script>

This is being rendered like this:

<input id="mainForm:field" name="mainForm:field" type="text" value="">

Any idea on where am I wrong? Thanks!

Thanh TRAN CONG · Accepted Answer · 2013-09-09 15:02:38Z

2

You should escape the colon in the selector

$("#mainForm\\:field").attr("placeholder","Fill me");

answered Sep 9, 2013 at 15:02

Thanh TRAN CONG

2931 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blazemonger · Accepted Answer · 2013-09-09 15:02:49Z

1

From the docs:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[\]^{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.

Change your selector to $("#mainForm\\:field").

answered Sep 9, 2013 at 15:02

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

1 Comment

Nacho321 Over a year ago

Worked like a charm! Thanks, Blaze!

Collectives™ on Stack Overflow

JQUERY not working with JSF

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related