Data Table stateSave refresh continues POST requests after closing dialog

Question

I am using the Data Tables jQuery plugin on XPages to display our price list to users. The administrators of the price list search for similar items, click the item description to modify the item via a dialog box. As there are over 1000 items in the price list it is necessary to save the search and at the same time refresh the table so the user can review the changes in the list after closing before moving to the next item in their search. Due to the large number of entries refreshing the whole page is messy, so when opening the dialog I refresh only the dialog, which has always worked fine until I have introduced the stateSave on the DataTable. The problem being now when I close the dialog the page continues making POST requests to open the dialog again with a random item from the bean.

Any help would be greatly appreciated.

<xp:div style="width:30%" styleClass="mg20">
    <xp:panel id="tablePanel">
                <table id="keyItemsPLTable">
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Code</th>
                    </tr>
                </thead>
                <tbody>
                    <xp:repeat id="repeat1" rows="10000"
                        var="rowData">
        <xp:this.value><![CDATA[#  #javascript:itemBean.getPlItems("All","Price List Sales Cat Only")}]]></xp:this.value>
                        <tr>
                            <td>
                                <xp:link escape="true"
                                    text="#{rowData.description}" id="link3">
                                    <xp:eventHandler event="onclick"
                                        submit="true" refreshMode="partial" refreshId="dialog1" execMode="partial"> //Problem occurs due to this partial refresh
                                        <xp:this.action><![CDATA[#{javascript:itemBean.setPlItem(rowData);
    var dialog = getComponent("dialog1");
    dialog.show()}]]></xp:this.action>
                                    </xp:eventHandler>
                                </xp:link>
                            </td>
                            <xp:text tagName="td" escape="true"
                                id="computedField1" value="#{rowData.code}">
                            </xp:text>
                        </tr>
                    </xp:repeat>
                </tbody>
            </table>

            <xp:scriptBlock>
                <xp:this.value><![CDATA[
        $(document).ready(function() {
         var table = $('#keyItemsPLTable').DataTable( {
             stateSave: true, //https://datatables.net/reference/option/stateSave
            stateDuration: -1//This doesn't seem to work. https://datatables.net/reference/option/stateDuration
            });
            });
          ]]></xp:this.value>
            </xp:scriptBlock>
            </xp:panel>
        </xp:div>


<xe:dialog id="dialog1">

        <xp:panel id="panelFullDialog" styleClass="mg20">
                <xp:div styleClass="mg20">
                    <xp:inputText id="inputDesc"
                        value="#{itemBean.plItem.description}" styleClass="wd200">
                    </xp:inputText>
                </xp:div>


                <xp:div styleClass="mg20">
                    <xp:inputText value="#{itemBean.plItem.code}"
                        id="inputText2" styleClass="wd200">
                    </xp:inputText>
                </xp:div>

                <xe:dialogButtonBar id="dialogButtonBar1">
                <xp:button value="Cancel" id="button4">
                    <xp:eventHandler event="onclick" submit="false">
                        <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialog1}')]]></xp:this.script>
                    </xp:eventHandler>
                </xp:button>

                <xp:button id="button1">
                    <xp:this.value><![CDATA[Save & Close]]></xp:this.value>
                    <xp:eventHandler event="onclick" submit="true"  refreshMode="partial" refreshId="tablePanel">
                        <xp:this.action><![CDATA[#{javascript:itemBean.savePLItem();
var dialog = getComponent("dialog1");
dialog.hide();

                    }]]></xp:this.action>

                    </xp:eventHandler>
                </xp:button>
            </xe:dialogButtonBar>
        </xp:panel>
    </xe:dialog>

On closing the Post requests continue with the dialog reappearing until the page is closed.

200 POST
instant.abc.co.uk testing.xsp?$$ajaxid=view:_id1:tablePanel xhr html 35.47 kB 426.05 kB 2165 ms 200 POST
instant.abc.co.uk testing.xsp?$$ajaxid=view:_id1:dialog1 xhr html 574 B 650 B 1969 ms 200 GET instant.abc.co.uk testing.xsp?$$ajaxid=view:_id1:dialog1:_content&$$showdialog=true&$$created=true&$$createdialog=false&$$viewid=!6rftmmaw860jebb294nc4ay3y! xhr html 871 B 1.94 kB 6 ms 200 POST
instant.abc.co.uk testing.xsp?$$ajaxid=view:_id1:dialog1 xhr html 574 B 650 B 2057 ms 200 GET instant.abc.co.uk testing.xsp?$$ajaxid=view:_id1:dialog1:_content&$$showdialog=true&$$created=true&$$createdialog=false&$$viewid=!6rftmmaw860jebb294nc4ay3y! xhr html 873 B 1.94 kB 4 ms 200 POST
instant.networkconnect.co.uk testing.xsp?$$ajaxid=view:_id1:dialog1 xhr html 574 B 650 B

Paul Stephen Withers Paul Stephen Withers · Accepted Answer · 2019-07-11T08:22:54

If you're trying to refresh tablePanel after closing the dialog, don't make that the refresh ID. The hide() method takes a parameter of the area to refresh after the dialog has closed. That's because the SSJS needs to post back to the browser to make the call to close the dialog, so it will pass a client-side JavaScript call to make a GET request to refresh whatever ID was passed as a parameter of the hide() method. See https://www.intec.co.uk/xpages-dialog-control-and-partial-refreshes/.

Data Table stateSave refresh continues POST requests after closing dialog

1 Answers