Need some rich:modalPanel + A4J Help

[bsmithjj]

Hello,

I am trying to use a single rich:modalPanel to display content for multiple rows using Ajax4JSF. I'm having trouble figuring out what the best way to do this is...

I have a dataTable of rows - for each row, there will be a link that, when clicked should display the rich:modalPanel with a detail form for the clicked row.

Here is the data table:

 <rich:dataTable value="#{draftAccessRequestMaster.draftAccessRequestsList}" var="draft">
 <f:facet name="header">
 <rich:columnGroup>
 <rich:column colspan="2">
 <h:outputText
 value="Choose Entitlements for Your Selected Applications"
 style="font-size:12pt;font-weight:bold;"/>
 </rich:column>
 </rich:columnGroup>
 </f:facet>
 <rich:column>
 <f:facet name="header"><b>Application</b></f:facet>
 <h:outputText value="#{draft.application.name}"/>
 </rich:column>
 <rich:column>
 <f:facet name="header"><b>Role</b></f:facet>
 <rich:panel id="#{draft.application.id}_roles">
 <button title=" Choose roles. "
 class="buttonSearch" style="margin-left:5px;"
 onclick="return chooseRoles('#{draft.application.id}');">
 <img src="img/add2-16x16.png" border="0" alt=" Add roles " align="top"
 style="padding-top:1px;padding-bottom:1px;"/>
 Choose Roles
 </button>
 </rich:panel>
 </rich:column>
 </rich:dataTable>

Here is the modal panel:

 <rich:modalPanel id="chooseRoles">
 <f:facet name="header">
 <h:outputText value="Select Roles for Application" style="padding-left:5px;"/>
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="img/close.gif" alt="Close Search"
 style="cursor:pointer;padding-right:5px;"
 onclick="Richfaces.hideModalPanel('chooseRoles');"/>
 </f:facet>
 <a4j:form id="roleTreeForm">
 <input type="hidden" name="draftRowId" value=""/>
 <input type="hidden" name="conversationId" value="#{conversation.id}"/>
 <a4j:jsFunction name="updateTree" reRender="rolesTree"/>
 <a4j:region id="rolesTree">Hello</a4j:region>
 <a4j:commandButton value="A" id="A" reRender="rolesTree" style="display:none;"/>
 </a4j:form>
 Role Choose goes here...
 </rich:modalPanel>

I'll need to use some type of Ajax-update call in order to make the modal panel show content specific to the selected row. I've seen the wizard examples but this isn't really the same as the wizard approach - does anyone know how to:

Show a modalpanel and on show, have an ajax request fire to obtain content for the modal panel?

Thanks,
Brad Smith

[ilya_shaikovsky]

you may call the panel not by the simple html elements but with a4j action component. The only you need is reRender the content nested to panel(not the panel itself). And call the JS API in oncomplete handler of the component.

[bsmithjj]

Hi,

Thanks for the suggestion - it partially works but now I have a follow on question. Here is the panel code:

 <rich:modalPanel id="chooseRoles">
 <f:facet name="header">
 <h:outputText value="Select Roles for Application" style="padding-left:5px;"/>
 </f:facet>
 <f:facet name="controls">
 <h:graphicImage value="img/close.gif" alt="Close Search"
 style="cursor:pointer;padding-right:5px;"
 onclick="Richfaces.hideModalPanel('chooseRoles');"/>
 </f:facet>
 <input type="hidden" name="draftRowId" value=""/>
 <input type="hidden" name="conversationId" value="#{conversation.id}"/>
 <a4j:form id="roleTreeForm">
 <a4j:commandButton id="clicker" value="Clicker" reRender="serverTime" oncomplete="Richfaces.showModalPanel('chooseRoles');" style="display:none;"/>
 </a4j:form>
 <a4j:outputPanel id="serverTime" >
 <h:outputText value="#{serverTime}"/>
 </a4j:outputPanel>
 Role Choose goes here...
 </rich:modalPanel>

What I'm doing is using an HTML button elsewhere in the page that calls a javascript function which simply clicks the a4j:commandButton - here is the javascript code:

 function chooseRoles(appId) {
 $('roleTreeForm:clicker').click();
 return false;
 }

I know the submit is working - I see the server respond to the submit; I also know the oncomplete is working, the modalPanel appears. The problem I am having is that immediately after appearing, the modalPanel disappears - Why is this happening?

Thanks