1 button with 2 x partial refresh and a document save

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.

Answer 2

  <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
            <xp:this.action>
                <xp:actionGroup>
                    <xp:executeScript>
                        <xp:this.script><![CDATA[#{javascript:document.save();}]]></xp:this.script>
                    </xp:executeScript>
                </xp:actionGroup>
            </xp:this.action>
        <xp:this.onComplete><![CDATA[(function(){
            XSP.partialRefreshGet("#{id:PanelSubItem}");
            XSP.allowSubmit();
            XSP.partialRefreshGet("#{id:PanelSubSubItem}");
          })();]]>
       </xp:this.onComplete>
    </xp:eventHandler>

Answer 3

One possible way is to take advantage of the fact that you can run CSJS followed by SSJS. SSJS will only run of CSJS returns true.

So for your button you add your existing double partial refresh code as client-side code to the onClick event of the button (and perhaps you need to add a return true statement as well), and then you add your document save code as SSJS to the same onClick event.