jsf 2 - How to access custom JSF tags through javascript getElementById - Stack Overflow

admin管理员组

文章数量:1336660

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

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

• javascript
• jsf-2

Share Improve this question Follow edited Aug 12, 2011 at 14:40 BalusC 1.1m376376 gold badges3.6k3.6k silver badges3.6k3.6k bronze badges asked Aug 12, 2011 at 14:36 user891935user891935 2511 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

In this answer, I'll assume that it's indeed a posite ponent.

First of all, JavaScript works with HTML DOM tree, not with JSF ponent 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"> posite ponent which in turn uses for example <h:mandButton id="button"> in the implementation, then it'll look like something like this:

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

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

You should use exactly that ID in your JavaScript function.

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

本文标签： jsf 2How to access custom JSF tags through javascript getElementByIdStack Overflow