JQUERY DIALOG窗格内不能使用FORM

今天在做AJAX DIALOG数据提交实验,实验目的是,在DIALOG内显示另一页面,并将FORM组件信息提交保存至数据库。代码如下:

DIALOG实现:

function OpenDialog(url,title,width,height,top,left) {
var div = $("<div id=‘div_Info‘ title=‘"+title+"‘></div>").appendTo($("BODY"));
var content = div.load(url, {});
$("#div_Info").data("url", url);
div.dialog({
autoOpen: true,
width: width,
height: height,
modal: true,
resizable: false,
bgiframe: true,
close: function (evt, ui) {
div.dialog("destroy");
div.html("").remove();
}
});
}

//要加载的DIALOG页面

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>UpdateUserPwd</title>
<script src="~/Scripts/jquery-3.0.0.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script>
$(function () {
$(‘:button‘).click(function () {
save();
});
})
function save() {
$.get(‘/RMBase/SysUser/UpdateUserPwd2?a=123&b=456‘,function (response,status,xhr) {
alert(response);
}
);
}
</script>
</head>
<body>
<div>

<FORM>
<input type="text" id="name" />
<input type="password" id="password" />
<button type="submit">提交</button>

</FORM>
</div>
</body>
</html>

//MVC后台

public ActionResult UpdateUserPwd()
{
return View();
}

public String UpdateUserPwd2(string a,string b)
{
LoginUsers user = (LoginUsers)Session["loginuser"];
if (user.userID == null || user.userID == "")
return "";
var query = _content.Base_UserInfo.Where(u=>u.User_Account==user.userAccount);
query.First().User_Name = query.First().User_Name + a + b;
_content.SaveChanges();
return a + b;
}

在点击了提交按钮后,DIALOG自动关闭,很是奇怪!后来发现是FROM自动提交的缘故,DIALOG页面修改为如下解决问题。

//要加载的DIALOG页面

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>UpdateUserPwd</title>
<script src="~/Scripts/jquery-3.0.0.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script>
$(function () {
$(‘:button‘).click(function () {
save();
});
})
function save() {
$.get(‘/RMBase/SysUser/UpdateUserPwd2?a=123&b=456‘,function (response,status,xhr) {
alert(response);
}
);
}
</script>
</head>
<body>
<div>

<FORM>
<input type="text" id="name" />
<input type="password" id="password" />
<button type="submit">提交</button>

</FORM>
</div>
</body>
</html>

时间: 2025-01-15 21:02:22

JQUERY DIALOG窗格内不能使用FORM的相关文章

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

jquery dialog open后,服务器端控件失效的快速解决方法

jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的open后,服务器端控件全部失效了,不能执行相应的后台代码.只是源于jquery默认把dialog添加到body中,而不是原来所在的服务器端的form中了 解决方法: 1.可以调用dialog的open前,$("#dialog").parent().appendTo("form:fi

使用jquery dialog

网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… 我自己简单地写了个使用jquery dialog封装函数,有兴趣的朋友看看. JavaScript(看起来有点多,但放到vs里,ctrl+m+o,还是比较清楚明了的): $.ivanjs = $.ivanjs || {}; $.ivanjs.com = $.ivanjs.com || {}; $.i

jQuery实现页面内锚点平滑跳转

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=

jquery dialog 参数说明

var dialog = art.dialog({ title: '欢迎', content: '欢迎使用artDialog对话框组件!', icon: 'succeed', follow: document.getElementById('btn2'), ok: function(){ this.title('警告').content('请注意artDialog两秒后将关闭!').lock().time(2); return false; }, button: [ { name: '同意',

jquery dialog

jquery dialog 详解 博客分类: JQuery JavaScript 还是先看例子吧.另外如果要拖动.改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js<!DOCTYPE html><html><head><link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel=&

jquery dialog的一些坑

jquery dialog工具可以方便的生成一个弹出框,但是在一些需要多个弹出框的应用场景上会有一些bug 具体场景: 当使用过一次模态框之后,使用另外的一个模态框时,已经消失不见的模态框会重新出来 错误排查之后发现:这是由于当第一次使用模态框关闭之后,jquery会在body最后新增一个div,display:none,不可见,下一次调用的时候直接取用,(主要作用是保存该模态框所在的位置参数) 但是当唤醒一个另外的模态框时,除新增一个模态框div外,会把已有的不可见div唤醒 通过定义模态框的

修改 Jquery Dialog 的位置

今天在做一个功能的时候使用到了Jquery UI中的dialog组件,应为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况

jQuery的serialize方法无法获取form数据

长期以来,我一直以为form表单是放数据的,table.tr.td是负责HTML页面显示布局的,他们之间不会互相影响.但是今天出现了这样的一个问题.同样的代码使用jQuery的serialize方法在IE8和IE9上执行是可以获取到form表单数据的,而在IE11上就不行. 经过多次试验.比较.测试发现是因为form标签和table交叉的原因.比如在以下的情况是执行失败的: <table> <form> <tr> <td>姓名</td> <