Richfaces modalPanel load with Ajax

Question

I use richfaces in my project and particularly the tag rich:modalPanel which allows to display popups in pages.

So to do this, I include my popup like this:

<ui:include src="popup.xhtml" />

This popup contains this code:

<rich:modalPanel id="sra" width="400" autosized="true" left="100" >
...
</rich:modalPanel>

Finally to display the popup, I do this in the main page:

<a4j:commandLink id="linkSRA" value="#{msg['SRA']}" action="#{controller.checkSRA}" oncomplete="#{rich:component('sra')}.show()" />

All work fine but my problem is the next:

In a page, I have many popup and each popup is included in the main page. The weight of this one is very big for nothing. So, how can I do to load the popup's content in ajax when I want to load a popup ?

Thanks

Answer 1

Re-render the panel content via some action and then open the modal in oncomplete=".."

Answer 2

I have write a little article : "How to create a stateful Richfaces popup" where I show how to create a popup controller. This popup controller allows to replace all the modal tags with a few lines :

<a4j:outputPanel binding="#{popupController.popupContainer}" id="popupContainer">
<c:forEach items="#{popupController.popups}" var="popup">
<f:subview id="popupView#{popup.id}">
<ui:include src="#{popup.uri}">
<ui:param name="popupBean" value="#{popup.popupBean}"/>
</ui:include>
</f:subview>
</c:forEach>
</a4j:outputPanel> 

The article is available here. Sorry, it is too long to be paste directly here.