0 Replies Latest reply on Feb 1, 2010 7:57 AM by Muhammad Ijaz Ahmed

    Dynamically deciding either to show or hide modalPanel

    Muhammad Ijaz Ahmed Newbie

      I have been trying to figure that out how to hide or show modalpanel dynamically , but unfortunately i couldn't make that work.

      Scenario:

                    I want to move object from one place to another in a tree. You can say that i want to change parent node of some child node. On some cases i need some futher information prior to change parent. So we decide either to display extended information or not in backing bean action method. So i wanna do either things, 1 close that modalPanle, 2 hide tree component and show other components. Currently i have hard coded, i.e always show modalpanel after nodeselection in tree. have a look on the code as followed.

      Bold Code: javascript writing to hide or show modalpanel

       

       

      <rich:panel id="moveCampaignPnl"><rich:panel id="moveCampaignPnl">
                  <div style="overflow:auto; width:300px; height: 400px;" align="left">   
                  <table>
                      <tr>
                          <td>
                              <h:outputText id="objTree_error" value="#{messageBean.errorMessage}" styleClass="error_message" rendered="#                       {messageBean.popupErrorMessage}" />
                          </td>
                      </tr>
                      <tr>
                          <td>
                              <rich:panel rendered="#{!moveCampaignBean.renderAgreementPnl}" >
                              <h:form>                           
                                  <rich:tree id="objTree" var="value"           
                                      value="#{moveCampaignBean.treeNode}"
                                      nodeFace="#{value.typeText}"
                                      nodeSelectListener="#{moveCampaignBean.doProcessSelection}"
                                      ajaxSubmitSelection="true"
                                      switchType="client"
                                      onselected="Richfaces.showModalPanel('progressPnl'); companyCheck('#{value.name}');"                                                               
                                      oncomplete="Richfaces.hideModalPanel('progressPnl'); showMPnl('moveCampaignModalPnl', true);"
                                      reRender="objTree_error">                                                               
                                      <rich:treeNode
                                                  type="Cl" iconLeaf="/images/Cl.gif" icon="/images/Cl.gif"
                                                  reRender="moveCampaignPnl, mdPnl, perPnl, periods, propPnl">
                                          <h:outputText value="#{value.name}"></h:outputText>
                                      </rich:treeNode>
                                     
                                      <rich:treeNode
                                                  type="Br" iconLeaf="/images/Br.gif" icon="/images/Br.gif"
                                                  reRender="moveCampaignPnl, mdPnl, perPnl, periods, propPnl">
                                          <h:outputText value="#{value.name}"></h:outputText>
                                      </rich:treeNode>
                                  </rich:tree>
                              </h:form>
                              </rich:panel>
                              <rich:panel rendered="#{moveCampaignBean.renderAgreementPnl}">
                                  <h:form>
                                      <rich:dataTable var="flight"
                                          value="#{moveCampaignBean.flightList}"
                                          rowKeyVar="index">
                                          <rich:column>                                       
                                              <h:outputLabel value="#{flight.mediaType}"></h:outputLabel>
                                          </rich:column>
                                          <rich:column>                                       
                                              <rich:comboBox enableManualInput="false" width="170" listWidth="200"  value="#{flight.selectedAgreement}" validator="#{moveCampaignBean.doValidateAgreement}">                                           
                                                  <f:selectItems value="#{moveCampaignBean.agreementList}"></f:selectItems>
                                                  <a4j:support action="#{moveCampaignBean.updateFlightAgreement}" event="onchange">
                                                      <f:param name="flightIndex" value="#{index}"/>
                                                      <f:param name="agreement" value="#{flight.selectedAgreement}"/>
                                                  </a4j:support>                                           
                                              </rich:comboBox>
                                          </rich:column>                               
                                      </rich:dataTable>
                                      <a4j:commandButton
                                                      value="Save & Close"
                                                      styleClass="btnn"
                                                      action="#{moveCampaignBean.doSave}"
                                                      onclick="Richfaces.showModalPanel('progressPnl');"
                                                      oncomplete="Richfaces.showModalPanel('progressPnl'); showMPnl('moveCampaignModalPnl',#{!moveCampaignBean.validation});"
                                                      reRender="moveCampaignPnl, mdPnl">
                                      </a4j:commandButton>
                                  </h:form>
                              </rich:panel>
                          </td>
                      </tr>   
                      <tr>
                          <td>
                             
                          </td>
                      </tr>
                  </table>
                  </div>   
                  <table>
                      <tr align="center">
                          <td align="center">
                              <h:form>
                                  <a4j:commandButton id="cb" value="Close" onclick="Richfaces.hideModalPanel('moveCampaignModalPnl');" styleClass="btnn"/>
                              </h:form>
                          </td>
                      </tr>
                  </table>   
              </rich:panel>

       

      Can anybody plz help me out