0

<p:selectOneMenu>JavaScript/jQuery を使用してPrimeFaces の選択された値を取得するにはどうすればよいですか?

このように取得しようとしていますが、if条件に入らず、要素のIDが正しくありません。

<h:head> 
    <script> 
        function showDialog() { 
            alert("insdie function"); 
            if($('#someSelect').val() == 'India') { 
                dlg.show(); 
                alert("after function"); 
            } 
            alert("outside function"); 
        }   
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <p:selectOneMenu 
                    id="someSelect" 
                    value="#{testController.countryName}" 
                    <f:selectItem itemLabel="Select One" itemValue="" /> 
                    <f:selectItems value="#{addPatientProfileBB.patStatusSelect}" 
                        itemLabel="#{testController.countryName}" 
                        itemValue="#{testController.countryNameId}" /> 
                    <p:ajax process="someSelect" update="dialog" oncomplete="showDialog()"/> 
                </p:selectOneMenu> 
            </h:panelGrid> 

            <p:dialog id="dialog" header="Login" widgetVar="dlg"> 
                <h:form> 
                    <h:panelGrid columns="2" cellpadding="5"> 
                        <h:outputLabel for="username" value="Username:" /> 
                        <p:inputText id="username" required="true" label="username" /> 
                    </h:panelGrid> 
                </h:form> 
            </p:dialog> 
        </p:panel>  
    </h:form> 
</h:body>
4

3 に答える 3

6

JSF は Web サーバー上で実行され、Web ブラウザーに送信される HTML を生成します。JavaScript/jQuery は Web ブラウザーで実行され、JSF ソース コードは何も表示されず、HTML 出力のみが表示されます。

ブラウザーでページを開き、右クリックしてソースを表示(または PrimeFaces ショーケース サイトのこちら)。実際の<select>要素には、親の ID が<h:form>先頭に追加され、単語が_input接尾辞として付けられていることがわかります ( は<p:selectOneMenu>基本的に a を生成し<div><ul><li>て、プレーンな では不可能な派手なルックアンドフィールを実現するため、<select>隠されています)。

したがって、親フォームに固定 ID を与える場合 (JSF が ID を自動生成しないようにするため)、次の JSF コードは

<h:form id="form">
    <p:selectOneMenu id="someSelect" ...>

<select>次のように HTML を生成します。

<select id="form:someSelect_input">

DOM から要素を取得するには、代わりにその ID を正確に使用する必要があります。

$("#form\\:someSelect_input");

また

$("[id='form:someSelect_input']");

以下も参照してください。

具体的な問題とは関係ありませんが、別の問題があります<p:dialog>。それには別のものが含まれているため、HTML では違法な<h:form>フォームを効果的にネストしています! その全体を次のようにフォームの外に置きます。<p:dialog> 

<h:form>
    <p:selectOneMenu ... />
</h:form>
<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>
于 2012-06-05T05:04:11.863 に答える
5

変更してみてください

if($('#someSelect').val() == 'India') {

の中へ

if($("select[name$='someSelect_input'] option:selected").val() == 'India') {

編集

変更することでセレクターを改善できます

name$='someSelect_input'

の中へ

name='yourFormName\\:someSelect_input'
于 2012-06-05T05:04:21.827 に答える
0

私は私の友達です。次の解決策を見つけました。

<h:head> 
    <script> 
        function showDialog() {
            alert(PF('selectWV').getSelectedValue());
            if (PF('selectWV').getSelectedValue() == "b") {
                PF('buttonWV').jq.show();
            } else {
                PF('buttonWV').jq.hide();
            }
        }  
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <h:form>
            <p:selectOneMenu style="width:150px" id="id" widgetVar="selectWV">  
                <f:selectItem itemLabel="Select" itemValue="a"></f:selectItem>
                <f:selectItem itemLabel="Other" itemValue="b"></f:selectItem>
                <p:ajax process="id" update="dos" oncomplete="showDialog()"/>
            </p:selectOneMenu>
            <p:commandButton value="Register" widgetVar="buttonWV"
                style="display: none" />
        </h:form>
            </h:panelGrid> 
        </p:panel>  
    </h:form> 
</h:body>
于 2017-02-19T19:17:42.153 に答える