How to invoke rich:modalPanel from another page ?

[Abhishek Reddy]

Hi All,

I am new to JSF, I need help in invoking rich:modalPanel from another page ?

For example:
Consider Page1.xhtml
In the above page, I have to provide a link somewhere in the middle of the form which popups the modalPanel. This modalPanel is in another Page (say modalPage.xhtml)

The modalPanel content should be in a different page as it is needed in the multiple pages of the application.

Note: This modalPanel has another form which takes some inputs from the user.

I have used <ui:include> tag to include the content of the modelPanel.xhtml and used the below code to invoke the modalPanel (in Page1.xhtml), but it is not working.

<a href="javascript:Richfaces.showModalPanel('modalPanelID')">Display Modal Panel</a>

I think it is not finding the id 'modalPanelID' of rich:modalPanel tag which is present in another page, but not sure about that.

Please provide your thoughts.

Thanks
Abhishek

[Tim Holloway]

If there's not a JavaScript sandbox rule that prohibits one web page from controlling another web page, there should be.

However, the easiest way to use a common dialog (modalPanel) in more than one page (View) definition is to put it in a Facelets component and include that component on the calling pages. You must, of course, be careful to put the include statement OUTSIDE of any form definitions on the calling pages.

Here's some code I use:

<a4j:commandButton id="newWid" value="New Widget..." disabled="#{not woBackingBean.editable}" action="#{woBackingBean.doNewWidget" immediate="true" ajaxSingle="true" reRender="messages,NewWidgetDialog" oncomplete="javascript:Richfaces.showModalPanel('NewWidgetDialog');" styleClass="verboseButton noprint" />

This particular button has the following special properties:

1. Can be used even when the form containing it has invalid/incomplete data (immediate="true", ajaxSingle="true")
2. Invokes an AJAX listener to (re)initialize the properties of the form's backing bean(s) (a4j/action=)

[Abhishek Reddy]

Thanks for the reply,

I did the way you have suggested, but failed.... below is the code

<ui:composition xmlns:jsp="http://java.sun.com/JSP/Page"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich"
	xmlns="http://www.w3.org/1999/xhtml"	
	version="2.0">

       <f:view>			
		     <h:form id="loginForm">
		     
			     <table>
				     <tr><td>			     	
					    <h:outputText value="User Name"/></td><td>
					    <h:inputText value="#{user.username}" id="username" /></td>
					    <td> <h:message for="username" id="usernameError"/>
					 </td>
					 <td>					 
					 <a4j:commandLink  onclick="javascript:Richfaces.showModalPanel('myModalPanel');">Show Modal Panel</a4j:commandLink>					        
					 </td>
					 </tr>
					 <tr>
					 <td><h:outputText value="Password"/></td>
					 <td><h:inputSecret value="#{user.password}" id="password" /></td>
					 <td><h:message for="password" id="passwordError"/></td>
					 </tr>
					 <tr><td colspan="2" align="center">  
					    <h:commandButton action="#{loginAction.login}" value="Login"/>
					 </td></tr>   
				 </table>
		     </h:form>
	   </f:view>              
 	   <f:view>
 	   <ui:include src="/modalPanel.xhtml"></ui:include> 	   					
 	   </f:view>
</ui:composition>

modalPanel.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:a4j="http://richfaces.org/a4j">

       <rich:modalPanel id="myModalPanel">
               <f:facet name="header">
                               <h:outputLabel value="123"/>
               </f:facet> 
                
               From Modal Panel 
       </rich:modalPanel>              
 
</ui:composition>

The above code is not working, could you please tell me where I went wrong ?

Thanks

[Tim Holloway]

I prefer to put my dialog definitions at the beginning (before the form), rather than the end, but I don't think it actually matters.

Most likely you problem comes from using more than one "f:view" in the View Definition. You don't need to do that.

[Abhishek Reddy]

thanks for the help, its working now.

[Abhishek Reddy]

Hello Tim,

I have one more question for you.

When i click on the modal panel link, the current page is getting refreshed. Inside the modalPanel window, I have save and close button...when I click either of the buttons backend page(modalPanel calling page) is getting refreshed. How to stop refreshing the backend page (modalPanel calling page) ?

Thanks,
Abhishek

[Tim Holloway]

Abhishek Reddy wrote:Hello Tim,

I have one more question for you.

When i click on the modal panel link, the current page is getting refreshed. Inside the modalPanel window, I have save and close button...when I click either of the buttons backend page(modalPanel calling page) is getting refreshed. How to stop refreshing the backend page (modalPanel calling page) ?

Thanks,
Abhishek

Restrict the reRender on the button's action to only the dialog (and its children). If you're not using an AJAX commandButton (a4j:commandButton), you need to, since the normal h:commandButton does refresh the entire page - no partial page refresh.