3 Replies Latest reply on Oct 21, 2008 10:04 AM by Nick Belaevski

    Handling ajax4jsf onchange event in different panel

    Val Sw Expert

      I have 2 dependent dropdowns, value of 2nd is dependent on 1st.

      I am using ajax4jsf, onchange event works fine when we place the both dropdowns in same panel or 1 in rich:panel and other just outside rich panel.

      But, when I place 1 dropdown in one rich panel and other dropdown in another rich panel, nothing happens when I change 1st. dropdown... sorry if explantion is wrong, here is the code for clarity

      As I am able to make it work in same panel, I think I am missing just small thing... please help...

      <rich:panel>
      <a:outputPanel id="myPanel1">
      <s:decorate id="masterItems" template="layout/edit.xhtml">
      <ui:define name="label">Master List : </ui:define>
      <h:selectOneMenu value="#{itemList.masterValue}" required="true">
      <s:selectItems var="v_item" value="#{itemList.masterItems}" label="#{v_item}" noSelectionLabel="select quantitation ..."/>
      <a:support event="onchange" reRender="panel2"></a:support>
      </h:selectOneMenu>
      </s:decorate>
      </a:outputPanel>
      </rich:panel>
      <!-- If I place a:outputPanel id="panel2" here, values of dropdown changes properly -->

      If I place "<a:outputPanel id="panel2".." just after above richpanel, it works fine.

      ISSUE:
      But when I place <a:outputPanel id="panel2".." in another rich panel as below, nothing happens when I change 1st. dropdown
      ===============================================
      <f:facet name="header">Details</f:facet>
      <rich:dataTable></rich:dataTable>
      <rich:panel>



      <h:outputText value="Item" />
      .......
      <ui:repeat value="#{studyHome.region}" var="info">


      <!-- Values of dropdown is not changed -->
      <a:outputPanel id="panel2" rendered="#{!empty itemList.masterValue}">
      <h:selectOneMenu value="#{itemList.detailValue}">
      <s:selectItems var="v_item" value="#{itemList.detailItems}" label="#{v_item}" noSelectionLabel="select color ..."/>
      <!--<a:support event="onload" reRender="panel2"></a:support>-->
      </h:selectOneMenu>
      </a:outputPanel>


      </ui:repeat>

      </rich:panel>

        • 1. Re: Handling ajax4jsf onchange event in different panel
          Nick Belaevski Master

          Hi,

          Looks like the code got messed? Can you please repost it?

          • 2. Re: Handling ajax4jsf onchange event in different panel
            Val Sw Expert

            Thanks for looking into it, here is the first issue, please ignore my last post

            a:support event="onchange" validates other form fields...

            I have some form fields in a xhtml page, some text fileds are (required="true").
            If user selects the master dropdown down list, without filling mandatory fields page is validated and I see the error in console as
            --------------------------------------------------------------------------
            WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.
            sourceId=study:j_id166:0:j_id187:color[severity=(ERROR 2), summary=(value is required), detail=(value is required)]
            --------------------------------------------------------------------------
            In the above case I tried selecting the dropdown without filling "pname" text field which was at the bottom of the page...
            I tried immediate=true but no success

            <rich:panel>
            <s:decorate id="entryPointDecoration" template="layout/edit.xhtml">
            <ui:define name="label">Entry Point</ui:define>
            <h:inputText id="entryPoint" required="true" value="#{quantExperimentHome.instance.entryPoint}"/>
            </s:decorate>

            <a:outputPanel id="myPanel1">
            <s:decorate id="masterItems" template="layout/edit.xhtml">
            <ui:define name="label">Master List : </ui:define>
            <h:selectOneMenu value="#{itemList.masterValue}" required="true" immediate="true">
            <s:selectItems var="v_item" value="#{itemList.masterItems}" label="#{v_item}" noSelectionLabel="select quantitation ..."/>
            <a:support event="onchange" reRender="panel2"></a:support>
            </h:selectOneMenu>
            </s:decorate>
            </a:outputPanel>
            </rich:panel>

            ISSUE:
            But when I place <a:outputPanel id="panel2".." in another rich panel as below, nothing happens when I change 1st. dropdown
            ===============================================
            <rich:panel>




            <h:outputText value="Color" />

            <h:outputText value="PName" />



            <a:outputPanel id="panel2" rendered="#{!empty itemList.masterValue}">
            <h:selectOneMenu value="#{itemList.detailValue}" immediate="true">
            <s:selectItems var="v_item" value="#{itemList.detailItems}" label="#{v_item}" noSelectionLabel="select color ..."/>
            </h:selectOneMenu>
            </a:outputPanel>


            <s:decorate template="layout/edit.xhtml">
            <h:inputText id="pname" required="true" value="#{info.pname}"/>
            </s:decorate>

            <tbody...


            </rich:panel>

            • 3. Re: Handling ajax4jsf onchange event in different panel
              Nick Belaevski Master

              Can you please try to remove

              rendered="#{!empty itemList.masterValue}"
              and see if it will work?