关于新增弹出窗口的两种JS代码写法

本文详细介绍了如何使用jQuery和Ajax技术在网页上实现新增窗口和编辑功能,包括窗口显示、表单重置、错误信息处理、表单验证、数据提交和响应处理。同时展示了如何在编辑模式下处理不同按钮的功能,如保存、发布、修改发表和取消操作。
摘要由CSDN通过智能技术生成
方法一:
JSP:画出新增窗口,新增时的基本信息。但是不带起脚按钮的
JS:jQuery(document).ready(function() {
$("#editor").hide();//首先隐藏,新增窗口
$("#btn_add").click(showAddWindow);//初始化新增按钮
//初始化窗口
$("#editor").dialog( {//创建一个窗口
autoOpen : false,
height : 400,
width : 400,
modal : true,
resizable : false,
close : function() {
$(this).dialog("destory");//关闭dialog
}
});
})
//新增方法
var showAddWindow=function(){
//设置公用窗口标题
$("#editor").dialog("option", "title", "新增窗口");
//重置form表单
$("#editor-form").resetForm();
//弹出新建窗口之前先清除错误信息
$("input.error").removeClass("error");
$("label.error").css("display", "none");
//设置公用form中按钮的操作
$("#editor").dialog("option", "buttons", [ {
text : "提交",
id : "btn_submit",
click : function() {
$("#editor-form").ajaxSubmit( {
url : $.WEB_ROOT + '/aip/example/add.do',
beforeSubmit: function(arr, $form, options) {
return $("#editor-form").validate().form();
},
success: function(data,statusText){
if(data['success']){
$.alert('新增成功','提示',function() {
$( this ).dialog( "close" );
$("#editor").dialog("close");
$("#list").jqGrid().trigger("reloadGrid");//刷新Gride
});
}else{
$.alert('新增失败');
}
}
});
}
}, {
text : "取消",
click : function() {
$("#editor-form").resetForm();
$("#editor").dialog("close");
}
} ]);
$("#editor").dialog("open");//弹出窗口
}

}


方法二:
JSP:画出新增的基本DIv信息。但是带保存、发表、修改发表、取消等按钮。点击这些按钮时直接跳转JS里的方法
JS:
//提交方法
var submitArticle=function(type){
if (ue.getContent() == '') {
$.alert('请输入博文内容!');
ue.focus();
return;
}
$("#content_hidden").val(ue.getContent());
$("#editor-form").ajaxSubmit( {
url : $.WEB_ROOT + '/aip/blog/submitArticle.do?type='+type,
beforeSubmit: function(arr, $form, options) {
return $("#editor-form").validate().form();
},
success: function(data,statusText){
$("#editor").parent().mask("操作正在执行中...");
if(data['success']){
$.alert('编辑成功','提示',function() {
$("#editor").parent().unmask();
page('','');
$('#article_type').empty();
$('#query_article_by_date').empty();
initQueryList();
});
}else{
$.alert('编辑失败');
$("#editor").parent().unmask();
}
}
});
}


//新增方法:JSP页面定义好了新增按钮的方法跳转。
var showAddWin=function(){
$("#editor-form").resetForm();
$('#articleTable').hide();
ue.setContent('');
$("#btn_pubed").hide();
$('#lableTable').hide();
$('#id').removeAttr('value');
$('#userId').val(id);
$('#btn_save').show();
$('#btn_pub').show();
$("#editor").show();
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值