artDialog弹出新页面，保存后关闭弹出框并刷新父页面

 

 

artDialog 弹出框插件，或者说是弹出对话框插件，需要对弹出后的对话框操作？artDialog的控制接口就是用来干这些事情的，这在异步消息操作中非常有用。 artDialog功能特性： 自适应内容、强大的接口配置参数、细致的体验、预先缓存皮肤图片更快响应、跨平台兼容兼容：IE6+、Firefox、Chrome、Safari、 Opera。并且IE6下也能支持现代浏览器的静止定位(fixed)、覆盖下拉控件、alpha通道png背景等，而且在artDialog弹出框插件 中，框架应用扩展将完全被简化。

 

最近项目中有使用到artDialog,遇到一些问题：

1：弹窗open一个新页面，在点击弹窗的确定按钮时保存数据并关闭该弹出框并刷新父页面。

下面有个例子，转载于zhangwu

打开编辑页面代码，确定事件调用了页面上隐藏的btnsave按钮。

art.dialog.open(url, {

        id: 'pg123',

        title: strtitle, lock: false, width: wid, height: hei,

        ok: function () {

            var iframe = this.iframe.contentWindow;

            iframe.document.getElementById("btnsave").click();

            return false;

        },

        cancel: true

    });

保存后调用

function showtip2(str) {

    art.dialog.tips(str, 1.5);

    setTimeout('originreload()', 1000);

}

function originreload()

{

    var win = art.dialog.open.origin;//来源页面

    win.location.reload();

}

刷新父窗体，自动关闭弹出窗体。

 以上代码我使用后还是有问题，在保存时调用方法sumitModelForm()，在其后调用showtip2("操作成功！");后，数据保存了，但是窗口未关闭。

 

function sumitModelForm(){
	
	if($("#modelForm").valid()){
	    $("#modelForm").submit();
	}
	
}

 

 经过检查+不断测试，发现ajaxForm可以完善该功能。我之前是直接form.submit()的。

修改代码如下：

1)在弹窗新开页面引入jquery.form.js 以及 artDialog库；

2)后台操作后使用response.getWrite().print("success")来表示操作成功等；

3)父页面弹窗代码

var alt=null;
function openAddUser(operId){
    alt = art.dialog.open("openSavePage.do?operId="+operId, {
	    id:'evaluate'+operId,
    	title: '新增用户',
    	width :500,
	    height:320,
	    lock : true,
	    opacity : 0.4,
    	init: function () {
    	},
    	button :[
     		{
     			name : '确定',
     			callback : function(){
     				var iframe = this.iframe.contentWindow;
     				if (!iframe.document.body) {
         				return false;
        	 		};
        	 		iframe.sumitModelForm();
     				return false;
     			},
     			focus : true
     		},{
     			name : '取消',
     			callback : function(){
     				this.close();
     			}
     		}
     	],
    	cancel: true
    });
}

 

 

4)子页面代码

$(document).ready(function(){
	$("#modelForm").validate({
		errorClass:"text-error"
	});
	
	var options = {
		success: function(data) {
	        if(data=="success"){
	           showTip("操作成功","succeed");
	        }else{
	           showTip("操作失败","warning");
	        }
	}};
	$('#modelForm').ajaxForm(options);
});
//提交form
function sumitModelForm(){
	$('#modelForm').submit();
}	
//消息提示
function showTip(mess,icon) {
	art.dialog.through({
		id : 'Tip',
		title : '消息',
		fixed : true,
		lock : true,
		opacity: .2,
		content : mess,
		icon : icon,
		time : 1
	});
    setTimeout('originReload()', 1000);
}
//重载来源页面
function originReload(){
    var win = art.dialog.open.origin;
    win.location.reload();
}

 

<form id="modelForm" method="post" action="save.do">
 
...编辑域...
</form>

 

 

 以上代码，通过artdialog弹出form表单，并通过ajaxform来提交的js（表单可以采用jquery validate验证控件来验证表单），达到了我想要的效果。虽然比较曲折，对js还是得加强学习。

 

如果不想重装源页面，只想关闭dialog而已。

则使用一下方法closeAllDialog()替换掉之前的originReload()方法即可：

//关闭源页面上的所有dialog
function closeAllDialog(id) {
	//获得弹出窗口的源页面
	var win = art.dialog.open.origin;
	var list = win.art.dialog.list;
	for (var i in list) {
	    list[i].close();
	};
}

 

评论

1 楼 zqb666kkk 2014-10-14  

ajaxForm是 第三方插件的方法？