在对话框中的另一个组件中使用ajax更新组件

时间:2015-06-19 06:35:08

标签: ajax primefaces

在selectOneMenu中使用ajax更新另一个selectOneMenu时,ajax功能不起作用。代码有什么问题?

此代码有效,但我不想更新所有表单。

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

当城市选择时只更新其实体,显示实体和实体标签。我试过这样但是不起作用。

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

1 个答案:

答案 0 :(得分:0)

我假设你已经检查过testBean.control()实际上是被解雇了。

由于你的p:selectOneMenu id =“entities”在你的DOM树构建的那一刻没有呈现,因此ajax的更新无法将其作为目标,因为它不存在。您需要用容器包围它,例如p:outputPanel并改为更新容器。

这样的事情:

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