Modal Panel: Displaying contents from another page

[mhaseebkhan]

Hi All,

I am a newbie to RichFaces and have started learning it these days. Its really an awesome framework and provide many cool features.

I have a task in which I need to display a modalPanel when a link is clicked. I am working on a simple Apache MyFaces application without Facelets.

On my JSF page, I have the following code:

<f:view>

.....
.....
 <rich:modalPanel id="mp" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="images/ico_close.gif" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
 </f:facet>
 <p>Any JSF content might be inside the panel. In case of using Facelets or JSF 1.2, it might be any mixed content.</p>
 <p>The RichFaces modal panel is good with <a4j:include> to create a wizard like behavior.</p>
 <p>The model panel is open and closed from the javascript functionon <i>Richfaces</i> object. The following code
 <a href="javascript:Richfaces.hideModalPanel('mp')">hide this panel</a>:Richfaces.hideModalPanel('mp')</p>
 </rich:modalPanel>
</f:view>

Now, the issue is that the HTML text in the modalPanel is displayed on the main JSF page and not in the modalPanel. I have taken this code from JBOSS Demo but wasn't able to run it successfully.

Additionally, following is also mentioned in the demo:

There is no reason to put in on the page where it is called.If you want to perform submits from this modal panel, you should have a separate form inside it.

That's what exactly I want to do. I want to fetch the contents from another page but I have no idea how to do that.

Please suggest and oblige.

Thanks in advance.

Haseeb Khan

[ilya_shaikovsky]

use <f:verbatim> around plain html tags if you use 1.1 implementation version.

[mhaseebkhan]

Hi there,

Thanks for the reply. I have tried it and it worked. Thanks again !

Now, let me briefly describe the scenario.

I have a page which has a data table in it. In one column of the data table, I have added the following code:

....
<t:column>
 <f:verbatim>
 <a href="javascript:Richfaces.showModalPanel('mp', {left:'auto', top:'auto'})">Details</a>
 </f:verbatim>
</t:column>
....

And I have included the modalPanel on the same page as well using the following code:

<rich:modalPanel id="mp" minHeight="200" minWidth="450" height="200" width="500" zindex="2000">
 <f:facet name="header">
 <h:outputText value="Modal Panel Title" />
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="images/ico_close.gif" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" />
 </f:facet>
</rich:modalPanel>

Now, the requirement is that I need to display the details of the selected row in the modalPanel. I know that I need to associate a bean with the modalPanel in order to do that but I don't know where to start.

Following are the steps which I need to do in order to complete the task:
1 - Data table is displayed to the user after search.
2 - User clicks on the details button for a particular row.
3 - User should be displayed a modalPanel with the details of the selected item.

Please suggest and oblige.

Thanks.

Haseeb Khan

[dmitry.demyankov]

There's lots of information about onRowClick event and modalPanel used together - just use search ;)

For example, here's a simple solution that might give you some ideas - http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4091924#4091924

[mhaseebkhan]

Thanks for the reply.

But the issue is that I am not using scrollableDataTable. I am using a MyFaces data table for displaying the data.

In my opinion, if I can figure out that how I can pass a custom parameter to the modalPanel and on the basis of that parameter, I can fetch the details from database. After that, I think I need to bind a form with the modalPanel and somehow fill the details in it. So, when the modalPanel is displayed, the user can be displayed the details.

I hope I have clarified the scenario.

Thanks again.

Haseeb Khan

[dmitry.demyankov]

Have you looked through the example the that thread?

Here's an example of passing parameter's to the fields of the bean and these fields are then displayed in modalPanel components.

<a4j:support event="onRowClick" reRender="details" oncomplete="javascript:Richfaces.showModalPanel('_panel',{left:'auto', top:'auto'})">
 <a4j:actionparam name="cur1" value="#{cap.name}" assignTo="#{capitalsBean.currentCapital}"/>
 <a4j:actionparam name="cur2" value="#{cap.state}" assignTo="#{capitalsBean.currentState}"/>
 <a4j:actionparam name="cur3" value="#{cap.timeZone}" assignTo="#{capitalsBean.currentTimeZone}"/>
 <a4j:actionparam name="cur4" value="#{cap.stateFlag}" assignTo="#{capitalsBean.currentFlag}"/>
</a4j:support>

Just pass some id using a4j:actionparam when 'Detail' button is clicked and based on that id get all the required data and then show modalPanel.

Not that difficult I guess..

Or MyFaces data table doesn't work with a4j:actionparam?

[ilya_shaikovsky]

Should work fine. Inform us if any problem appears.

[mhaseebkhan]

Hi Ilya Shaikovsky and Dmitry Demyankov,

Thanks for your replies.

Ilya:

I am still facing issues. If you say, I can e-mail you my code and if you get some time, then please have a look at it.

Please reply to the topic in either case.

Dmitry:

I looked through the example you mentioned very carefully and since I am new to RichFaces, I have a doubt in my mind that events can only work for RichFaces components. So far, I have not been able to pass parameters to the modalPanel.

Following are the steps I performed:

1 - Created a new ModalBean to be used for displaying the data in modalPanel.
2 - Added a4j:support code with a4j:actionparam in the t:dataTable as your suggested.
3 - Added the display logic in rich:modalPanel.

Now, the issue is that no values are displayed in the modalPanel.

Following is the a4j:support code I added in t:dataTable

....
<a4j:support event="onclick" reRender="details">
 <a4j:actionparam name="param1" value="#{dataTableVar.primaryDescription}" assignTo="#{modalBean.primaryDecription}" />
 <a4j:actionparam name="param2" value="#{dataTableVar.secondaryDecripton}" assignTo="#{modalBean.secondaryDecripton}" />
 <a4j:actionparam name="param3" value="#{dataTableVar.tertiaryDescription}" assignTo="#{modalBean.tertiaryDescription}" />
</a4j:support>
....

Following is the code in rich:modalPanel for the display logic:

....
<a4j:outputPanel id="details">
 <h:panelGrid columns="2">
 <h:outputText value="Primary Description:" />
 <h:outputText value="#{modalBean.primaryDecription}" />
 <h:outputText value="Secondary Description:" />
 <h:outputText value="#{modalBean.secondaryDecripton}" />
 <h:outputText value="Tertiary Description:" />
 <h:outputText value="#{modalBean.tertiaryDescription}" />
 </h:panelGrid>
</a4j:outputPanel>
....

What I think is that MyFaces Datatable isn't working with this approach.

Additionally, I also want to add that a4j:support is not enclosed in h:form. Is it necessary to do that?

Note: The definition of rich:modalPanel is outside t:dataTable. Can this be an issue?

Please reply and oblige.

Regards,

Haseeb Khan

[dmitry.demyankov]

I'm not sure whether a4j:support will work with t:dataTable from MyFaces but I think it should.

a4j:support should be inside a form and I'd say that it's the right way to have modalPanel code outside your table.

[mhaseebkhan]

Hi Dmitry,

Thanks for the reply.

I think the issue is that we need to actually tell a4j:support the event on which we need to have the support for our ajax code and MyFaces dataTable event is not working in parallel with RichFaces. That's the feeling I have, but there are quite chances that I am wrong in it.

It would be really nice of you if you can provide me your GTalk ID so that I can add you in my list and we can have a chat on this issue.

Previously, I hadn't placed h:form outside a4j:support, I did it now, but no luck even after doing that.

If you have any other possibility/workaround in mind, please post it.

Thanks again.

Haseeb Khan

[ilya_shaikovsky]

just for test try to change the table from t to rich

[dmitry.demyankov]

When we should ask Ilya or Sergey whether a4j:support works with t:dataTable.

Can you try changing t:dataTable to rich:dataTable and check if it works like Ilya suggested?

And just to make it clear - a4j:support should be inside a form. Is it like that in your case?

Send me your GTalk ID in private message if you like :)

[mhaseebkhan]

Dmitry:

I have tried changing t:dataTable to rich:dataTable but it doesn't worked as well.

In my case, a4j:support is in a form.

I also tried the rich:dataTable in my environment, but it doesn't work as well.

Ilya:
Please confirm if I can send you my code and can figure out the issue.

Thanks.

P.S. Dmitry, my GTalk ID is the same as stated in the author name of this forum. i.e. mhaseebkhan. I will wait for you to add me in your list. Thanks again.

[ilya_shaikovsky]

Yes... please send me sample (with libs) directly (check my jboss profile for mail). After checking I email you and post the answer here to share it.

[mhaseebkhan]

Ilya:

Thanks for your feedback. I will send you the code for a review on your E-mail.

Thanks and Regards,

Haseeb Khan