javascript getElementByIdを使用してカスタムJSFタグにアクセスする方法

Question

次のコードがあります。ここで

<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> 

は<s:button>は、カスタムJSFコンポーネントであることに留意してくださいJavaScriptの

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

です。

助けを受けていただければ幸いです。

Answer 1

カスタムコンポーネントで正常に動作するはずです。それはカスタムコンポーネントですか、コンポジットコンポーネントですか？あなたが持っている問題とJSF 2.0タグの存在は、それが実際にのcomponsite componentのであることを示しています。カスタムタグ、カスタムコンポーネント、コンポジットコンポーネントの違いについては、When to use <ui:include>, tag files, composite components and/or custom components?

を確認してください。この回答では、実際には複合コンポーネントだとします。

まず、JavaScriptはHTML DOMツリーで動作し、JSFコンポーネントツリーでは動作しません。 JavaScriptはWebブラウザではなくウェブブラウザ上で動作します。 JSFはWebサーバー上で実行され、多数のHTMLを生成してWebブラウザに送信します。 document.getElementById()は、HTML DOM要素IDのみを受け入れます。

だから、あなたは、あなたのウェブブラウザでJSFページを開く右クリックを行うべき<s:button>が生成したHTML DOM要素のIDを見つけると、その後ソースの表示とHTMLソースで生成されたHTML要素を探します。

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

すなわちNamingContainerコンポーネント自身によって複合コンポーネント、：今度は実施例<h:commandButton id="button">のために使用しています、それはこのようなもののようになりますあなたの<s:button id="login">複合コンポーネントの場合

そのようなIDの前に付け加えます。 <h:form>もそのようなコンポーネントです。これにより、同じ親コンテナ内で複数の複合コンポーネントを使用することができます。

あなたのJavaScript機能には、その IDを正確に使用する必要があります。

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