Dynamically deciding either to show or hide modalPanel
mijazahmed Feb 1, 2010 7:57 AMI 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