3 Replies Latest reply on Oct 29, 2008 4:46 AM by Ingo Jobling

    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" 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>
      <table border="1" class="dr-table rich-table">
      <thead class="dr-table-thead">
      <tr class="dr-table-header rich-table-header">               
      <th class="dr-table-headercell rich-table-headercell"><h:outputText value="Item" /></th>
      .......
      <ui:repeat value="#{studyHome.region}" var="info">
      <tbody>     
      <td class="dr-subtable-cell rich-subtable-cell">  
      <!-- 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>                                   
      </td>
      </tbody>
      </ui:repeat>
      </table>
      </rich:panel>