Primefaces ajax update component in another component on dialog

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>

dialog component is the pop-up, window.location.reload() returns the page where you work on. — Ozgur Anakok, Jun 19 '15 at 07:09
I know 'what' it does ;-). It was, maybe in not to good English, why it is there. What is the need I've never seen it used in jsf apps — Kukeltje, Jun 19 '15 at 07:12
possible duplicate of [Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?](http://stackoverflow.com/questions/9010734/why-do-i-need-to-nest-a-component-with-rendered-some-in-another-component-w) — Kukeltje, Jun 19 '15 at 08:54

score 0 · Accepted Answer · answered Jun 19 '15 at 08:41

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>

Primefaces ajax update component in another component on dialog

1 Answers1