有人建议直接在表单上提交.这不是我想要实现的.我想要,特别是能够在输入type =’submit’上调用click()事件,并且它通常会提交表单. jQuery UI对话框似乎正在干扰这种正常行为.请查看我创建的jsFiddle链接,因为问题是可重新创建的.
(首先我已经在StackOverflow上看到这个问题,但答案在我的情况下不起作用：jQuery UI Dialog with ASP.NET button postback)
所需行为：
在我的页面上,我有一个隐藏的字段和一个提交按钮(通过CSS隐藏).
我想做的是使用JavaScript以编程方式单击此按钮,从而导致提交表单.最重要的是…我想从jQuery UI对话框的内部触发所有这些.基本上,用户将在jQuery UI对话框内进行选择,这将导致整个页面被提交和重新加载.
问题陈述
触发一个按钮点击,通常工作正常提交表单.但是,当从jQuery UI对话框中触发动作时,会失败.
正如你可以在我的jsFiddle代码中看到的,我在提交按钮上调用jQuery的click()函数….但是表单实际上并没有提交！该按钮确实被JavaScript点击,但是“表单提交行为”本身不会发生.该页面没有发布.
我相信jQuery UI对话框以某种方式干扰了我以编程方式点击的按钮的表单提交行为.
我想以编程方式触发按钮点击的原因：
我不能让对话框内的按钮自己提交按钮.在我的情况下,我创建了一个包含jQuery UI对话框的可重用JavaScript控件.这个JS控件允许用户选择一个员工.但是,当员工被选中时,所需的行为并不总是：表单提交. (有时我可能希望在页面上显示所选的员工,而不是执行提交.)
额外细节：
这个问题不是ASP.NET特有的,但这里有一些额外的细节可以帮助解释为什么我正在尝试所有这些.我正在使用.NET 4.5编写一个ASP.NET Web窗体应用程序.我已经开始越来越多地为我的页面使用JavaScript,但是在这个特定的页面上,我想触发实际的回发到服务器,所以我可以处理ASP.NET页面生命周期中的按钮单击事件并填充GridView.这就是为什么我想要使用JavaScript来单击一个asp：按钮,这反过来会导致一个表单提交.
最重要的是…尝试自己—>见下面的jsFiddle链接…..
再次,这个问题不是ASP.NET的特有的.我已经能够使用常规HTML和jQuery UI在JsFiddle上重新创建相同的问题.这是JsFiddle链接：
正如您在代码中可以看到的那样,我已经尝试通过jQuery DOM操作来使用表单中的jQuery UI对话框的“修复”.这似乎无法解决问题.
谢谢！我感谢任何帮助！
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;
}
解决方法
jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();
