Question

我正在尝试在我的应用程序中实现Sweet Alert javascript库。

以下是相关代码：

<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>

点击链接会删除该行，无论我做出何种选择（取消/确定）。在我做出选择之前，我可以看到删除的发生。我觉得它与回调的执行顺序有关。

如果我使用最后注释掉的代码（window.confirm），它可以很好地工作。

感谢您对此的指导。

谢谢，

丹

Answer 1

问题是第三方提示不会阻止并等待响应，然后继续像本机浏览器提示一样。

此SO帖子显示了将代码放入回调以尝试使用Sweet Alert的示例（但看起来您已经在做类似的事情）： sweetalert blocking like normal prompt

触发将运行服务器端代码的按钮的单击事件将完成工作。如果您希望它以异步方式运行（但不需要更新页面客户端），您可以在回调中运行json rpc方法或调用自定义REST服务来运行服务器端代码而不是触发隐藏按钮。

Answer 2

我通过创建隐藏按钮解决了这个问题。我从链接和CSJS中删除了SSJS代码，该链接称为隐藏按钮的click事件，以执行SSJS。

这是更新后的代码：

<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>

这里是实际执行文档删除的隐藏按钮的代码：

<!-- 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>

如果有人有更好的方法来实现这一结果，我可以接受以下建议：）

Answer 3

您可以添加额外的活动，而不是添加隐藏按钮。
在下面的代码中，您有2个事件的无线电：
- onchange - 这是CSJS运行的标准事件 - onchangepost - 这是包含您将在onchange事件后评估的代码的额外事件（不能由Designer UI提供，您必须手动添加）。

我假设您的onchange代码是异步的。如果您有一些onEnd / onComplete部分，我会添加一些代码，这些代码将在完成其工作后进行评估（可能您在那里单击了按钮）。这是您可以使用ie fire event snippet（https://openntf.org/XSnippets.nsf/snippet.xsp?id=manually-fire-attached-event）运行onchangepost代码的地方

<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>

SSJS在CSJS回调函数之前执行

3 个答案: