Hello,
I have a page with 11 modalPanels.
Performance is horrible (some modalPanels contain heavy components such as rich:tree).
When I remove the modalPanels my page shrinks from 160 ko to 84 ko.
So, I want to render the HTML markup of each modalPanel only when needed (so using ajax).
Is there an easy way or a built-in way to do it ?
I've only seen demos show/hide modalPanel in javascript, but not in ajax.
I've done the following code and it works but I've find it much to complex for this kind of common task:
Here contextMenu must show modalPanel.
When I click on a button of the modalPanel, the modalPanel must close.
Thanks for your input !
<rich:contextMenu id="menu" submitMode="ajax">
<rich:menuItem ajaxSingle="true" value=""
action="bidon"
oncomplete="javascript:Richfaces.showModalPanel('mpDeplaceDocument');return false;"
reRender="ddOp">
<b>#{messages['menu.contextuel.move']}</b>
<a4j:actionparam name="paramId" assignTo="#{editerDocumentAction.instance.id}" value="{id}" />
<a4j:actionparam value="move" assignTo="#{editerDossierAction.operationLabel}" />
<a4j:actionparam name="showMP" assignTo="#{explorerAction.mpDeplaceRendered}" value="true" />
</rich:menuItem>
</rich:contextMenu>
<a4j:outputPanel id="ddOp">
<rich:modalPanel id="mpDeplaceDocument"
showWhenRendered="true"
rendered="#{explorerAction.mpDeplaceRendered}">
<f:facet name="header">
<h:outputText value="Choisir un emplacement" />
</f:facet>
Content
<div class="modalButtons">
<a4j:commandButton id="mpDocumentOkId" value="OK" action="#{editerDocumentAction.move}"
status="ajaxStatusMP"
reRender="ddOp,dTP"
onclick="javascript:Richfaces.hideModalPanel('mpDeplaceDocument');">
<a4j:actionparam name="hideMP" assignTo="#{explorerAction.mpDeplaceRendered}" value="#{false}"/>
</a4j:commandButton>
</div>
</rich:modalPanel>
</a4j:outputPanel>
