对话框上另一个组件中的Primefaces Ajax更新组件

Question

When using ajax inside selectOneMenu to update another selectOneMenu, the ajax feature isn't working. What's wrong with the code?

This code works but I don't want to update all form.

<p:dialog header="Create New Campaign" height="auto" appendTo="@(body)" modal="true" widgetVar="createCampaign" resizable="false">
        <h:form id="createCampaign">
            <h:panelGrid columns="2" cellpadding="3" cellspacing="3" style="width: 400px; max-height: 500px;" >
                <h:outputLabel value="Name:" for="Name" />
                <p:inputText  style="width:90%" id="Name" value="#{testBean.name}" title=" Name" required="true">
                </p:inputText>

                <h:outputLabel value="Assign to:" for="assignTo" />
                <p:selectOneMenu  style="width:90%" id="assignTo" value="#{testBean.city}">
                    <f:selectItem itemLabel="Choose One" itemValue="" />
                    <f:selectItems value="#{testStaticSelectBean.cities}" />
                    <p:ajax event="change" listener="#{testBean.control}" update="createCampaign"/>
                </p:selectOneMenu>

                <h:outputLabel value="Entities:" rendered="#{testBean.entityControl}"  id="entitiesLabel"/>
                <p:selectOneMenu  style="width:90%" id="entities" value="#{testBean.entity}" rendered="#{testBean.entityControl}">
                    <f:selectItem itemLabel="Choose One" itemValue="" />
                    <f:selectItems value="#{testSubSelectBean.entities}" />
                </p:selectOneMenu>                    
            </h:panelGrid>
            <br />
            <p:commandButton update="create" value="Save" icon="ui-icon-check" actionListener="#{testBean.Test}" oncomplete="window.location.reload();"/>
        </h:form>
    </p:dialog>

when city choosed only update its entities, show entities and entitiesLabel. I tried like this but does not work.

<p:dialog header="Create New Campaign" height="auto" appendTo="@(body)" modal="true" widgetVar="createCampaign" resizable="false">
        <h:form id="createCampaign">
            <h:panelGrid columns="2" cellpadding="3" cellspacing="3" style="width: 400px; max-height: 500px;" >
                <h:outputLabel value="Name:" for="Name" />
                <p:inputText  style="width:90%" id="Name" value="#{testBean.name}" title=" Name" required="true">
                </p:inputText>

                <h:outputLabel value="Assign to:" for="assignTo" />
                <p:selectOneMenu  style="width:90%" id="assignTo" value="#{testBean.city}">
                    <f:selectItem itemLabel="Choose One" itemValue="" />
                    <f:selectItems value="#{testStaticSelectBean.cities}" />
                    <p:ajax event="change" listener="#{testBean.control}" update=":createCampaign:entities :createCampaign:entities"/>
                </p:selectOneMenu>

                <h:outputLabel value="Entities:" rendered="#{testBean.entityControl}"  id="entitiesLabel"/>
                <p:selectOneMenu  style="width:90%" id="entities" value="#{testBean.entity}" rendered="#{testBean.entityControl}">
                    <f:selectItem itemLabel="Choose One" itemValue="" />
                    <f:selectItems value="#{testSubSelectBean.entities}" />
                </p:selectOneMenu>                    
            </h:panelGrid>
            <br />
            <p:commandButton update="create" value="Save" icon="ui-icon-check" actionListener="#{testBean.Test}" oncomplete="window.location.reload();"/>
        </h:form>
    </p:dialog>

Answer 1

I assume that you already checked that testBean.control() is actually being fired.

Since your p:selectOneMenu with id="entities" is not rendered at the moment your DOM tree is built, it is not available to be targeted by the update of the ajax, simply because it isn't there. You need to surround it with a container, for example an p:outputPanel and update the container instead.

Something like this:

<p:ajax event="change" listener="#{testBean.control}" update="createCampaign:panel1"/>

<p:outputPanel id ="panel1">
      <h:outputLabel value="Entities:" rendered="#{testBean.entityControl}"  id="entitiesLabel"/>
      <p:selectOneMenu  style="width:90%" id="entities" value="#{testBean.entity}" rendered="#{testBean.entityControl}">
             <f:selectItem itemLabel="Choose One" itemValue="" />
             <f:selectItems value="#{testSubSelectBean.entities}" />
       </p:selectOneMenu>   
</p:outputPanel>