Question

I would like to do 2 Partial refreshes and 1 document save with the onclick of 1 button.
How could I do this ?
What I tried so far :

1. In CCJS , and no sumbmission to the server

   XSP.partialRefreshGet("#{id:PanelSubitem}", {
       onComplete: function() {
            XSP.partialRefreshGet("#{id:PanelSubsubitem}", {
                onComplete: function() { 
               '#{javascript:document1.save()}';
               }
           });
       }
   });
   

   Result: The 2 refrehes work but the document save not (normal since you can’t acces the back-end with ccjs.

2. Put the same code in SSJS, with a partial refesh or with a full refresh

   Result: First click on button refreshes first Panel and then stops. Second refresh will update the second Panel and stops. Third click on the button will save the document. (this is also normal since the partial or full refresh of the code conflicts with the partial or full refresh of the server option, since you can only do 1 refresh at a time)

So if I can’t do it in SSJS and I can’t do it in CSJS , how can I do it ?

Answer 1

What you can try is to create a Save button which saves the document and partial refreshes itself after completion of second partial refresh via CSJS. So your snippet would be something like this:

XSP.partialRefreshGet("#{id:PanelSubitem}", {
   onComplete: function() {
      XSP.partialRefreshGet("#{id:PanelSubsubitem}", {
         onComplete: function() { 
            document.getElementById("#{id:btnSave}").click();
         }
      });
   }
});
<xp:button value="Save" id="btnSave">
    <xp:eventHandler event="onclick" submit="true" refreshMode="partial" refreshId="btnSave">
        <xp:this.action><![CDATA[#{javascript:document1.save()}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

You can hide the Save button using CSS.