How to access custom JSF tags through javascript getElementById

Question

I have the following code.

<h:form id="Form">
  <div class="pageBody">
    <h:outputLabel id="lbl" styleClass="formLabel" value="#{messages['lable.email']}:" />
    <s:button id="login" label="#{messages['login.button']}" actionBean="#{account}" actionMethod="login" />
  </div>
</h:form>

Here is the javascript

var obj = document.getElementById("Form:lbl");  //This works
var obj1 = document.getElementById("Form:login"); //This doesnt work

Keep in mind that <s:button> is a custom JSF Component.

Any help is appreciated

Community · Accepted Answer · 2017-05-23 11:59:37Z

5

It should work fine with custom components. Is it a custom component or a composite component? The problem you're having and the presence of JSF 2.0 tag indicates that it's actually a componsite component. For the difference between custom tags, custom components and composite components, check When to use <ui:include>, tag files, composite components and/or custom components?

In this answer, I'll assume that it's indeed a composite component.

First of all, JavaScript works with HTML DOM tree, not with JSF component tree. JavaScript namely runs on webbrowser, not on webserver. JSF runs on webserver, produces a bunch of HTML and sends it to webbrowser. The document.getElementById() accepts only HTML DOM element ID's.

So, to find out which HTML DOM element ID the <s:button> has generated, you should open the JSF page in your webbrowser, do a rightclick and then View Source and locate the generated HTML element in the HTML source.

In case of your <s:button id="login"> composite component which in turn uses for example <h:commandButton id="button"> in the implementation, then it'll look like something like this:

<input type="submit" id="Form:login:button" />

A composite component by itself namely an NamingContainer component, which prepends the IDs like that. The <h:form> is also such a component. This enables you to use multiple composite components inside the same parent container.

You should use exactly that ID in your JavaScript function.

var button = document.getElementById("Form:login:button");

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Aug 12, 2011 at 14:43

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

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

1 Comment

user891935 Over a year ago

Thanks I did a inspect in the chrome. The button has its own xhtml. I just have to put the id of the <span id = "loginBtnMain"> and works

Collectives™ on Stack Overflow

How to access custom JSF tags through javascript getElementById

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related