SSJS gets executed before CSJS callback function - callback

Question

I am trying to implement the Sweet Alert javascript library in my application.
Here is the the relevant code:
<xp:link escape="true" text="" id="link2" style="color:#4A4A4A">
<i class="fa fa-trash-o fa-lg">
</i>
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" refreshId="assetList">
<xp:this.action><![CDATA[#{javascript:
var db:NotesDatabase = session.getDatabase(sessionScope.serverPath,sessionScope.dbName);
var id = viewRow.getUniversalID();
var doc:NotesDocument = db.getDocumentByUNID(id);
doc.remove(true);}]]></xp:this.action>
<xp:this.script><![CDATA[swal({
title: "Are you sure?",
text: "This asset will be permanently deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#2196f3",
confirmButtonText: "Ok",
cancelButtonColor: "#607D8B",
cancelButtonText: "Cancel",
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonClass: 'confirm-class',
cancelButtonClass: 'cancel-class'
},
function(isConfirm){
if (isConfirm) {
return true;
} else {
return false;
}
});
//if(window.confirm("Are you sure you want to delete the asset?") != true)
return false;]]></xp:this.script>
</xp:eventHandler>
</xp:link>
Clicking on the link deletes the row regardless of the choice I make (Cancel/Ok). I can see the delete happening even before I make my choice. I have a feeling it has something to do with the order of execution for the callback.
If I use the code that's commented out at the end (window.confirm), it works perfectly.
I would appreciate your guidance on this.
Thanks,
Dan

Answer 1

The issue is that 3rd party prompts don't block and wait for a response before continuing like the native browser prompts do.
This SO post shows an example of putting the code in a callback to try to work with Sweet Alert (but it looks like you're already doing something similar):
sweetalert blocking like normal prompt
Triggering the click event of a button that will run the server-side code will get the job done. If you want it to run asynchronously (but not need to update the page client-side), you could run a json rpc method in the callback or make a call to a custom REST service to run the server-side code instead of triggering the hidden button.

Answer 2

I resolved this by creating a hidden button. I removed the SSJS code from my link and from the CSJS of the link called the click event of the hidden button to execute the SSJS.
Here's the updated code:
<xp:link escape="true" text="" id="link2" style="color:#4A4A4A">
<i class="fa fa-trash-o fa-lg">
</i>
<xp:eventHandler event="onclick"
submit="true" refreshMode="partial" refreshId="assetList">
<xp:this.script><![CDATA[swal({
title: "Are you sure?",
text: "This asset will be permanently deleted",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#2196f3",
confirmButtonText: "Ok",
cancelButtonColor: "#607D8B",
cancelButtonText: "Cancel",
closeOnConfirm: true,
closeOnCancel: true,
confirmButtonClass: 'confirm-class',
cancelButtonClass: 'cancel-class'
},
function(response){
if (response == true) {
var deleteAssetBtn = '#{javascript:getClientId("deleteAsset")}';
document.getElementById(deleteAssetBtn).click();
return true;
} else {
return false;
}
});
]]></xp:this.script>
<xp:this.action><![CDATA[#{javascript:viewScope.docID = viewRow.getUniversalID();}]]>
</xp:this.action>
</xp:eventHandler>
</xp:link>
And here's the code for the hidden button that actually executes the deletion of the document:
<!-- Hidden button -->
<xp:button value="Delete Asset" id="deleteAsset" style="display:none">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try {
var db:NotesDatabase = session.getDatabase(sessionScope.serverPath,sessionScope.dbName);
var doc:NotesDocument = db.getDocumentByUNID(viewScope.docID);
doc.remove(true);
viewScope.docID = "";
} catch(e) {
requestScope.errstatus = e.toString();
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
If anyone has a better way to achieve this outcome, I'm open to suggestions :)

Answer 3

You may add extra event instead of adding hidden button. I.e in the following code you have radio with 2 events:
- onchange - this is standard event where your CSJS is run
- onchangepost - this is extra event that contains your code that will be evaluated after onchange event (not avialable by Designer UI, you have to add it manually).
I assume that your onchange code is asynchronous. If you have some onEnd/onComplete section you my add some code that will be evaluated after it finishes its job (probably you click your button there). That's the place where you can run your onchangepost code using i.e. fire event snippet (https://openntf.org/XSnippets.nsf/snippet.xsp?id=manually-fire-attached-event)
<xp:radioGroup id="myRadio" required="false">
<xp:selectItem itemLabel="Option a"
itemValue="A">
</xp:selectItem>
<xp:selectItem itemLabel="Option b" itemValue="B">
</xp:selectItem>
<xp:eventHandler event="onchange" submit="false">
<xp:this.script>
<![CDATA[
doYourClientJS(
{onComplete: fireEvent(dojo.byId('#{id:myRadio}'), 'changepost')
});
]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onchangepost"
submit="true" refreshMode="partial" refreshId="otherUserInnerRefreshSection"
execMode="partial" execId="otherUserRefreshSection"
disableValidators="true">
<xp:this.action><![CDATA[#{javascript:doYourSSJS;}]]></xp:this.action>
</xp:eventHandler>
</xp:radioGroup>