Jquery & JSF find the particular id for

Question

I am looking to match id for inputText in JSF using Jquery. But it does not work and I do not know why.

JSF CODE

<h:inputText id="email" value="#{userActionManager.newUser.emailID}">
</h:inputText>

Jquery CODE

$(document).ready(function() {
$("inputText[id^=email]").each(function(){

    this.value = $(this).attr('title');
    $(this).addClass('text-label');

    $(this).focus(function(){
        if(this.value == $(this).attr('title')) {
            this.value = " ";
            $(this).removeClass('text-label');
        }
    });

    $(this).blur(function(){
        if(this.value == '') {
            this.value = $(this).attr('title');
            $(this).addClass('text-label');
        }
    });
});
});

I need inputText[id^=email] to be working to acces the inputText id used in JSF code. Please Help...

It's been some time since I worked with JSF but doesn't inputText expand to a regular `input` tag? So you should use the jQuery on the generated HTML rather on the template compnents. — DrColossos, Jun 03 '13 at 07:15
Rightclick JSF page in browser and choose *View Source*. Stare to it as long as until you finally realize that JSF is merely a HTML code generator and that JavaScript doesn't see JSF components at all, but only HTML elements. — BalusC, Jun 03 '13 at 13:31

score 4 · Accepted Answer · edited Jun 03 '13 at 13:33

4

Firstly Id's on a page should be unique.

Next remove the inputText tag from the selector (It is not a valid jQuery element selector)

$("[id^=email]").each(function(){

You can also add class "email" to inputText and use class selector:

$(".email").each(function(){

edited Jun 03 '13 at 13:33

BalusC

1,082,665
372
3,610
3,555

answered Jun 03 '13 at 07:18

Sushanth --

55,259
9
66
105

need to change ` – Sushanth -- Jun 03 '13 at 07:46
@user2446821, need to change ` – Daniel Jun 03 '13 at 09:11

Laabidi Raissi · Answer 2 · 2013-06-03T09:04:31.187

As Sushanth mentioned, you can not use inputText as a selector in jQuery. You must use input instead:

jQuery("input[type='text'][id^=email]:visible").each(...

Another point to check, is the generated client ID.
In fact, if in your form you are not specifying prependId="false" then the form ID will be added to the inputText id, ex: if form has id="formId" then, the generated ID for your input text will be, normally: formId:email. You have to inspect the ID using Chrome or Firebug to be sure.

Jquery & JSF find the particular id for

Jquery CODE

2 Answers2

Linked