Cle*_*ud8 13 jquery jquery-ui form-submit jquery-ui-dialog
编辑:
有些人建议直接在表单上提交提交.这不是我想要实现的目标.具体来说,我希望能够在输入类型='submit'上调用click()事件,并让它像通常那样提交表单.jQuery UI对话似乎干扰了这种正常行为.请查看我创建的jsFiddle链接,因为问题可以在那里重新创建.
(首先我已经在StackOverflow上看到了这个问题,但答案在我的情况下不起作用: 带有ASP.NET按钮回发的jQuery UI对话框)
期望的行为:
在我的页面上,我有一个隐藏字段和一个提交按钮(通过CSS隐藏).
我想要做的是使用JavaScript以编程方式单击此按钮,从而导致提交表单.最重要的是....我想从jQuery UI对话框中触发所有这些.基本上,用户将在jQuery UI对话框中进行选择,这将导致整个页面被提交和重新加载.
问题陈述
触发这样的按钮点击通常可以正常提交表单.但是,当从jQuery UI对话框中触发操作时,它会失败.
正如你在我的jsFiddle代码中看到的,我在提交按钮上调用了jQuery的click()函数....但是表单实际上并没有提交!该按钮确实被JavaScript点击,但"表单提交行为"本身并未发生.该页面未发布.
我相信jQuery UI对话框会以某种方式干扰我尝试以编程方式单击的按钮的表单提交行为.
我想以编程方式触发按钮单击的原因:
我不能让对话框内的按钮自己提交按钮.在我的例子中,我创建了一个可重用的JavaScript控件,它包含了一个jQuery UI对话框.这个JS控件允许用户选择一个员工.但是,当员工被选中时,所需的行为并不总是如下:表单提交.(有时我可能想在页面上显示已挑选的员工,但尚未执行提交.)
额外细节:
这个问题并不是特定于ASP.NET,但是这里有一些额外的细节可以帮助解释我为什么要尝试这一切.我正在使用.NET 4.5编写ASP.NET Web Forms应用程序.我已经开始越来越多地为我的页面使用JavaScript了,但是在这个特定的页面上我想触发一个实际的回发到服务器,这样我就可以处理ASP.NET页面生命周期中的按钮点击事件并填充一个GridView.这就是为什么我希望能够使用JavaScript来点击一个asp:按钮,这反过来会导致表单提交.
最重要的是......自己尝试--->请参阅下面的jsFiddle链接.....
同样,这个问题并不是特定于ASP.NET的.我已经能够使用常规HTML和jQuery UI在JsFiddle上重新创建相同的问题.这是JsFiddle链接:
正如您在代码中看到的,我已经尝试使用通过jQuery DOM操作在表单内移动jQuery UI Dialog的"修复".这似乎无法解决问题.
谢谢!我感谢任何帮助!
HTML
<html>
<head></head>
<body>
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="submit" value="Submit Form" id="btnSubmitForm" />
<input type="hidden" id="hdnEmployeeChosen" value="" />
</form>
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
</div>
</body>
JavaScript的
$(document).ready(function ()
{
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$('#btnOpenDialog').click(function () {
jqueryDialog.dialog('open');
});
$('.pickButton').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr('employeeName');
$('#hdnEmployeeChosen').val(pickedEmployee);
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$('#btnSubmitForm').click();
//alert($('#hdnEmployeeChosen').val());
});
});
CSS
form {
margin: 5px;
border: 1px solid black;
background-color: #EEE;
padding: 15px 5px;
}
.dialogClass {
border: 1px solid black;
padding: 5px;
margin: 5px;
background-color: LightBlue;
font-size: 14px;
}
.pickButton {
margin-right: 5px;
}
.divOptions {
margin-bottom: 3px;
}
刚才有一个类似的问题,我可以通过正确的提交按钮执行,但表单只是没有提交.在单步执行jquery对话框代码并且没有找到它如何阻止事件传播之后,我就决定在提交之前立即隐藏对话框.适用于你的小提琴:http://jsfiddle.net/Q4GgZ/1/
jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();
我遇到了同样的问题，以下建议对我有用。
$(this).parent().appendTo("form:first");open选项中的表单请参阅下面的 JavaScript
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false,
open: function() {
$(this).parent().appendTo('form:first');
}
});
我没有看到提交按钮的 Click 事件的代码。
代替
$('#btnSubmitForm').click();
尝试
$('form').submit();
或者在提交按钮的单击事件处理程序中提交表单。