我有Dojo confirmaDialog
,我需要在提交表单之前实现一个简单的验证,并在出现验证错误的情况下阻止模式关闭。
这就是我现在所拥有的:
var followUpDialog = new ConfirmDialog({
title: "Create new follow-up",
content: handleMessageContent(),
style: "width: 730px",
onShow: function() {
modalContainer = this.containerNode;
fillInputFields(modalContainer);
},
onExecute: function () {
if(!this.get("state")) {
handleSubmit();
} else {
// Need something like event.preventDefault here.
}
},
onCancel: function () {
//Do nothing...
}
});
基本上,当按下提交按钮时,我需要在某些条件下做某事。
答案 0 :(得分:1)
当您点击确定Button
时,会调用onExecute
,最后调用hide
对话框功能。
您可以将自定义代码添加到Okbutton Click事件,或者只是覆盖ConfirmDialog.js
并创建自定义事件;通过例子
首先覆盖ConfirmDialog:
CustomConfirmDialog = declare([ConfirmDialog],{
postCreate:function(){
this.inherited(arguments);
//check if realy passed parm is a function
if(typeof(this.submitFunction) == "function") {
this.okButton.on("click",lang.hitch(this,function(evt){
if(!this.submitFunction()) evt.preventDefault();
}));
}
}
});
创建提交功能:
submit = function(){
//submit code
}
然后当instatiate这最后发送选项参数中的sumbmit函数
(此处将其作为submitFunction
名称属性发送):
var followUpDialog = new CustomConfirmDialog({
id:'myDialog',
...
// function of submit
submitFunction:submit,....
....
}
下面是一个工作示例:
require(["dijit/ConfirmDialog", "dojo/_base/declare","dojo/on", "dijit/form/Button","dijit/registry","dojo/_base/lang","dojo/ready"],
function(ConfirmDialog,declare,On,Button,registry,lang,ready){
i=0;
// sample function to submit your form
submit = function(){
//Swap between true and false.
i ? ++i : --i;
return i;
}
// overide ConfirmDialog
CustomConfirmDialog = declare([ConfirmDialog],{
postCreate:function(){
this.inherited(arguments);
//check if realy passed parm is a function
if(typeof(this.submitFunction) == "function") {
this.okButton.on("click",lang.hitch(this,function(evt){
if(!this.submitFunction()) evt.preventDefault();
}));
}
}
});
ready(function(){
registry.byId("btn").on("click",function(e){
followUpDialog.show();
});
// instantiate new custom dialog
var followUpDialog = new CustomConfirmDialog({
id:'myDialog',
title: "Create new follow-up",
content: "content !",
style: "width: 730px",
//send submit function here
submitFunction:submit,
onShow: function() {
//modalContainer = this.containerNode;
//fillInputFields(modalContainer);
},
onExecute: function (e) {
console.log("execute called");
},
onCancel: function () {
//Do nothing...
}
});
})
}
);

<script type="text/javascript">
dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
<div data-dojo-type="dijit/form/Button" id="btn"> click me </div>
</body>
&#13;
此处还有Fiddle