destroy data in primefaces dialog after close from master page

Question

in my page have some commandButton that open dialog with table . table have 300 row and after close HTML dialog not destroy and persist in HTML page . i want destroy data in dialog after hide. and after click on commandButton repeat action load dialog and load data in dialog . I found this method

<p:ajax event="close" update="growl" listener="#{dialogBean.handleClose}"/>

but not know how can destroy dialog from facescontext.

Solution 1

Assuming you have the following dialog

<p:dialog id="dialog" widgetVar="dlgVar" dynamic="true" >
  <p:ajax event="close" update="growl" listener="#{dialogBean.handleClose}"
   onstart="PF('dlgVar').content.empty()"/>
</p:dialog>

Button

<p:commandButton value="Button" 
                 onComplete="PF('dlgVar').show()" 
                 update="dialog">

or you can call PF('dlgVar').content.empty() in the onHide of the dialog, if you don't need an ajax request.

<p:dialog id="dialog" widgetVar="dlgVar" 
          dynamic="true"
         onHide="PF('dlgVar').content.empty()">
</p:dialog>

Solution 2

I think this can help you.
Suppose you have a commandButton :

<p:commandButton id="button" value="Button" actionListener="#{dialogBean.populateDataTable}" onComplete="yourDialog.show()" update="@form">

Now your <p:dialog> will look like :

<p:dialog  widgetVar="yourDialog" dynamic="true" >
    <p:dataTable value="#{dialogBean.yourList}"..........> ...   </p:dataTable>
</p:dialog>

You have to populate dataTable's data in your actionlistaner. As your <p:dataTable> takes yourList of dialogBean, then fetch data of variable yourList from DB.

public void populateDataTable(ActionEvent event) {
    //Populate data here to be shown in `<p:dataTable>` inside `<p:dialog>`
    //yourList = new ArrayList<yourObject>();
    //allresult = fetchdataFromDB();
    //yourList.addAll(allresult);
}

Comments

[Hatem Alimam]

You mean that you want to lighten your DOM Tree after closing the dialog, by removing the elements from the DOM TREE ? @Jeus

[Jeus]

my problem that here. How i can populate dataTable (command in populateDataTable)?

[Diganta]

@Jeus I have updated my answer, let me know is it clear to you or not. Just populate the list/model(input for <p:dataTable>) in populateDataTable(ActionEvent event) method.

[Jeus]

plz write method in manageBean dialogBean.handleClose, thnx.

[Hatem Alimam]

if you need only to empty the DOM tree, this would do it without any server side method.

[Hatem Alimam]

I have updated the question, in the last code you can see there's no need for ajax request, just call it on the onHide, and you're okay. @Jeus

[Jeus]

oh yes. after hide content of dialog destroy of page? is good, tanks.

[JackTheKnife]

How can I do the same but with RequestContext.getCurrentInstance().execute("showDialog('dia‌​logBox')")