如何停止/暂停/覆盖Dojo confirmDialog隐藏执行?

时间:2017-02-06 12:10:23

标签: javascript dojo

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

基本上,当按下提交按钮时,我需要在某些条件下做某事。

1 个答案:

答案 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;
&#13;
&#13;

此处还有Fiddle