ausgewählten Wert aus selectOnemenu mit javascript in primefaces und öffnen Sie ein Dialogfeld

Wie können wir den ausgewählten Wert von PrimeFaces <p:selectOneMenu> mit JavaScript/jQuery?

Ich versuche es auf diese Weise, aber es geht nicht innerhalb der if-Bedingung, was bedeutet, dass die ID des Elements ist nicht korrekt.

<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>
  • Erklären Sie bitte, warum wartet 8 Minuten ist zu lange.
InformationsquelleAutor Java | 2012-06-05
  1. 4

    versuchen 

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

    in

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

    BEARBEITEN

    verbessern Sie den Selektor durch ändern 

    name$='someSelect_input'

    in

    name='yourFormName\\:someSelect_input'
    InformationsquelleAutor Daniel
  2. 5

    JSF läuft auf dem webserver und die HTML generiert, die gesendet werden, um den Web-Browser. JavaScript/jQuery läuft auf webbrowser und nichts zu sehen von der JSF-source-code, sondern nur die HTML-Ausgabe.

    Öffnen Sie die Seite im browser, Rechtsklick und View Source (oder hier auf der PrimeFaces-showcase site). Sie werden sehen, dass die eigentliche <select> element hat die ID des übergeordneten <h:form> vorangestellt und das Wort _input Suffix (weil die <p:selectOneMenu> im Grunde erzeugt eine <div><ul><li> zu erreichen, die ausgefallenen look ' N ' 'feel das ist nicht möglich, mit einem einfachen <select>, also es war versteckt).

    So, wenn Sie die Eltern bilden einen festen ID (also, dass JSF nicht autogenerate ein), dann ist die folgende JSF-code

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

    generiert die HTML - <select> wie folgt:

    <select id="form:someSelect_input">

    Müssen Sie genau, dass die ID statt zu greifen, die element aus dem DOM.

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

    oder

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

    Siehe auch:

    Unabhängigen zu dem konkreten problem, du hast da ein anderes problem mit sich, dass <p:dialog>. Es enthält ein weiteres <h:form> und somit sind Sie effektiv verschachteln von Formen, die illegal in HTML! Setzen Sie das gesamte <p:dialog> außerhalb form etwa so:

    <h:form>
    <p:selectOneMenu ... />
</h:form>
<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>
    InformationsquelleAutor BalusC
  3. 0

    Ich meine Freunde. ich habe die folgende Lösung gefunden.

    <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>
    InformationsquelleAutor Cristian Castaño
Schreibe einen Kommentar