2017-02-06 61 views
1

我有Dojo confirmaDialog,我需要在提交表单之前实现一个简单的验证,并在出现验证错误的情况下阻止模式关闭。如何停止/暂停/覆盖Dojo confirmDialog隐藏执行?

这就是我现在所拥有的:

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... 
    } 
}); 

基本上,我需要以某种方式做一定的条件时没​​有提交按钮被按下。

回答

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功能PARAMS (这里它是作为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"], 
 
\t function(ConfirmDialog,declare,On,Button,registry,lang,ready){ 
 
\t \t i=0; 
 
     
 
\t \t // sample function to submit your form 
 
\t \t submit = function(){ 
 
      //Swap between true and false. 
 
     \t 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(); 
 
     \t }); 
 
    \t \t // instantiate new custom dialog 
 
     \t var followUpDialog = new CustomConfirmDialog({ 
 
\t \t \t \t id:'myDialog', 
 
\t \t \t \t title: "Create new follow-up", 
 
\t \t \t \t content: "content !", 
 
\t \t \t \t style: "width: 730px", 
 
        //send submit function here 
 
\t \t \t \t submitFunction:submit, 
 
\t \t \t \t onShow: function() { 
 
\t \t \t \t \t //modalContainer = this.containerNode; 
 
\t \t \t \t \t //fillInputFields(modalContainer); 
 
\t \t \t \t }, 
 
\t \t \t \t onExecute: function (e) { 
 
\t \t \t \t \t console.log("execute called"); 
 
\t \t \t \t }, 
 
\t \t \t \t onCancel: function() { 
 
\t \t \t \t \t //Do nothing... 
 
\t \t \t \t } 
 
\t \t \t }); 
 
      
 
     }) 
 
    } 
 
);
<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>

这里也是一个Fiddle

+0

@Lukas做到这一点帮助ü? –

+0

这是一个很好的答案:)! – Radex