1 Reply Latest reply on Oct 8, 2009 1:07 PM by Ilya Shaikovsky

    Rendering modalPanels in Ajax

    gonzalad Apprentice

      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>