Jquery in JSF 2.0

Question

im newbie in Jquery , i want to do a placeholder in jsf , something like this : http://niklaskoehler.de/demos/vordefinierter-text/ . I've the next code :

<head>
<script type="text/javascript">
jQuery(document).ready(function() {

    var $ = jQuery;
    var Element = "#email";
    var InputText = "Placeholder demo";

    $(Element).val(InputText);

    alert("sup bro"); //this alert works

    $(Element).bind('focus',function(){
        $(this).addClass('focus');
        if($(this).val()==InputText){

            $(this).val('');
        }
    }).bind('blur',function(){
        if($(this).val()==""){
            $(this).val(InputText);
            $(this).removeClass('focus');
        }
    });
});


</script> 

</head>

And this is my form :

<h:form>
       <div class="form-item">
            <h:inputText id="email" title="Email" value="#{UserAction.email}"/>
       </div>
</h:form>

And nothing happen with the input , what is wrong in my code?

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

jQuery doesn't work with JSF component tree in server side. Instead, it works with HTML DOM tree in client side. In case of JSF, you should instead be looking at JSF-generated HTML output while writing jQuery. As you're encountering rather unpredictable HTML element IDs like pbGfb9435b3_2d720d_2d478d_2d8183_2d657b3839216b_j_id1:j_idt5:email, you're likely running a JSF portlet instead of servlet. The pgXxx ID prefix occurs on portlets only.

As a word of advice, don't select non-unique elements by ID. Select by class name instead.

E.g.

<h:inputText ... styleClass="email" />

with

var selector = ".email";
var inputText = "Placeholder demo";
$(selector).val(inputText);

(I took the liberty to fix poor variable names; they should not start with uppercase and the CSS selector is not an element)

this works , thanks , do you know how can define the style of this value defined in jquery? — Sark, May 31 '13 at 14:26
You're welcome. I have no idea what you're asking, but it seems to be completely unrelated to the initial question. Just press `Ask Question` button on right top and flesh out over there. — BalusC, May 31 '13 at 14:27

score 0 · Answer 2 · answered May 31 '13 at 14:08

0

Sark,

Execute your web page and viewsource for same.

Whatever ID you will find for your <input type='text' id='something'

add the same id to your Jquery

var Element = "#something";

answered May 31 '13 at 14:08

Ketan Bhavsar

5,338
9
38
69

Why my id is : id="pbGfb9435b3_2d720d_2d478d_2d8183_2d657b3839216b_j_id1:j_idt5:email" ? – Sark May 31 '13 at 14:13
Because you're using portlets. – BalusC May 31 '13 at 14:15
then i can't use this jquery? – Sark May 31 '13 at 14:16

Jquery in JSF 2.0

2 Answers2

See also: