Include modalpanel contents similiar a4j:include

[wark2007]

I am looking for a possibility to include the contents of a modalpanel at runtime, similiar to the a4j:include mechanism for wizards. The reason for that is quite simple: We're making heavy use of modalpanels (for CRUD dialogs, config dialogs, and so on) and there are sometimes more than 10 dialogs included in one HTML page - however in most cases just 1-2 dialogs are used by the user. This fact results in a bad performance (more data needs to be fetched and rendered by the browser).

Are there any possibilities to include the content "on show" via ajax? Maybe a combination of modalpanel and a4j:include? Of course, one can use simple window.open() calls but than I can't use the nice modalpanel component.

Are there other users having this kind of issue? Maybe that would be a nice feature for the next version? Any feedback or suggestion is welcome! :-)

Thanks!

[nbelaevski]

Hello,

Yes, this is possible. Re-render contents of modal panel before show and show it by oncomplete (this example doesn't show how to re-render: http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable, but it's very easy to add it).

[wark2007]

Hi, thank you for your quick response! I guess my explanation wasn't that good. I didn't mean with content of a modalpanel some information about a result set but the whole html content inside the modalpanel component.

One example: You have one html page with information about cars. On that page you have a lot of different modalpanels, one for creating a new car, one for editing a car, one for deleting a car, one modalpanel with technical information about the car, one modalpanel with information about finance and so on.

Consider that each modalpanel contains a lot of html code, than your browser needs to fetch and render a lot of html code although the user doesn't need it (at least for the first http request). The contents are only required if the user clicks that special button or link which shows the modalpanel. My aim was that the complete contents of the modal panel will be fetched in an ajax request like it works for a4j:include.

Unfortunately, I didn't know how to use a4j:include inside a modalpanel to meet the above described requirements.

Thanks and regards!

[ilya_shaikovsky]

it's pretty simple. You define something like

<a4j:outputPanel id="content">
<ui:include scr="#{myBean.pageSrc}"/>
</a4j:outputPanel>

inside your modal panel.

Then you just use the button like this

<a4j:commandButton reRender="content" action="#{myBean.setEditSrc"} oncomplete="Modal calling JS API here"/>
<a4j:commandButton reRender="content" action="#{myBean.setRemoveSrc"} oncomplete="Modal calling JS API here"/>

So after you hit some button - src for include will be changed from action. ModalPanel content will be updated on the client via reRender. And finally the panel you need will be shown.