Proper use of modal panel for confirmantion & success messag

[ckadam]

I am trying to design following scenario :

1. I have a data table containing bunch of employee names, and each row of the table has delete action (link)
2. When user clicks on this link, I want to show confirmation modal panel "Do you really want to delete this record ?"
3. If user clicks on OK, then delete operation happens, and user is shown success message in another modal panel.

I am thinking about writing code as follows,

<t:dataTable value="#{myBean.data}" var="d" >
 <t:column>
 <f:facet name="header">Name</f:facet>
 <h:outputText value="#{d.name}" />
 </t:column>

 <t:column>
 <f:facet name="header">Action</f:facet>
 <a4j:commandLink action="#{myBean.deleteRowData}" value="delete"
 reRender="myPopUp1, myPopup2"
 onsubmit="javascript:Richfaces.showModalPanel('myForm:myPopUp1')">
 oncomplete="javascript:Richfaces.showModalPanel('myForm:myPopUp2')">
 </a4j:commandLink>
 </t:column>

</t:dataTable>

<rich:modalPanel id="myPopUp1">
 <h:outputText value="Do you want to delete #{myBean.rowData.name} ?" />
</rich:modalPanel>

<rich:modalPanel id="myPopUp2">
 <h:outputText value="Successfully deleted #{myBean.rowData.name}" />
</rich:modalPanel>

But I am still not able to figure out :
1. When I show modal panel on form submit, how can I update rowData property in backing bean ? I dont think its possible before posting the form.
2. How can I close first modal panel and continue with form submit ?
3. IF the delete operation fails, then how can I NOT show success popup.

[ilya_shaikovsky]

Main page:

 <rich:modalPanel id="_panel">
 <a4j:include viewId="/pages/greeting.xhtml"></a4j:include>
 </rich:modalPanel>
 <h:form id="_form">
 <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"
 rowKeyVar="row" id="table" >
 <h:column>
...
 </h:column>
 <h:column>
 <a4j:commandButton oncomplete="javascript:Richfaces.showModalPanel('_panel')" value="Delete" ajaxSingle="true">
 <a4j:actionparam value="#{row}" assignTo="#{capitalsBean.deletedRow}" name="row"/>
 </a4j:commandButton>
 </h:column>
 </rich:dataTable>
 </h:form>

first include (popup):

<h:form>
 <h:outputText value="Sure to delete?"></h:outputText>
 <a4j:commandLink action="#{capitalsBean.delete}" value="Delete">
 </a4j:commandLink>
 <h:outputLink value="#" onclick="javascript:Richfaces.hideModalPanel('_panel')">
 <h:outputText value="Close"></h:outputText>
 </h:outputLink>
</h:form>

Second include (if needed):

<h:form onsubmit="javascript:Richfaces.hideModalPanel('_panel')">
 <a4j:commandLink value="Hide" reRender="table"></a4j:commandLink>
 </h:form>

bean:

public String delete() {
 //String sid=FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("row");
 System.out.println(getDeletedRow());
 int intid = Integer.parseInt(getDeletedRow());
 capitals.remove(intid);
 return "greeting1";
 }

Looks like your use case.

[ckadam]

Thanks for the response .

I understand how you are showing the first confirmation dialog and updating Backing bean prior to that. However from your example, it was not very clear as in :

1. Where is the second include actually included ? (in main page or in the greetings dialog )
2. How does the second modal panel invoked. ? Based on the delete action on first modal panel, its simply calling action on the backing bean. Does this action have some navigation rules, which cause first modal panel to close and display second modal panel ?

[ilya_shaikovsky]

There is navigation occurs as far as I used ajax action component inside the a4j:include which is returns navigation outcome.
So there will be navigation inside the include after delete link activated or closure if close pressed.