为什么我无法在jQuery UI对话框中触发提交按钮?

16

编辑:

有些人建议直接在表单上调用submit。但这不是我想要的。我想要的是,能够在input type='submit'上调用click()事件,并像通常一样提交表单。jQuery UI对这种正常行为似乎产生了干扰。请查看我创建的jsFiddle链接,因为问题可以在其中重现。


(首先,我已经在StackOverflow上看到了类似的问题,但答案在我的情况下不起作用:jQuery UI带有ASP.NET按钮后台提交

期望的行为:

在我的页面上,我有一个隐藏的字段和一个提交按钮(通过CSS隐藏)。我想使用JavaScript编程方式点击此按钮,从而导致提交表单。最重要的是....我想从jQuery UI Dialog内部触发所有这些内容。基本上,用户将在jQuery UI对话框中进行选择,从而导致整个页面被提交并重新加载。

问题陈述

这样触发按钮点击通常很好地提交表单。但是,当在jQuery UI Dialog中触发动作时,它会失败。

正如您在我的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:button,反过来导致表单提交。

最重要的是......亲自尝试--->请参见下面的jsFiddle链接.....

再次强调,此问题与ASP.NET无关。我已经能够在JsFiddle上使用常规HTML和jQuery UI重现同样的问题。以下是JsFiddle链接:

http://jsfiddle.net/fENyZ/18/

如您在代码中所看到的,我已尝试使用将jQuery UI Dialog通过jQuery DOM操作移动到表单内部的“修复”方法。这似乎并没有解决问题。

谢谢!我感激任何帮助!

<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

: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;   
}
13个回答

0

Jquery UI对话框默认情况下会阻止任何按钮提交(至少根据我的经验是这样的)。 说到这里,我发现如果通过Visual Studio将任何按钮的“提交行为”更改为“False”,那么它就可以工作了。 我知道这完全与应该是什么相反,但如果您这样做,则JQuery UI对话框内的按钮将会提交并起作用。

我还发现,在JQUI对话框中的任何字段在回传时都不会被ASP.net识别,除非您调用Jquery UI对话框对象上的destroy方法。

我真的很喜欢这个控件,直到我开始深入使用它与实际应用程序的细节,除了基本弹出窗口之外,我不确定这个控件是否已经完全准备好了。


0

问题是由使用id元素作为选择器引起的...当调用jquery ui对话框时,它会将期望的块复制到生成的容器中,这意味着像#form_name这样的特定标识符现在将具有重复项,从而混淆了jquery选择器...

我的解决方案是切换为类标识符,然后使用更具体的路径来选择按钮,例如:$(jQuery_dialog_box. class name).submit()(或click())


我认为问题不在选择器上。我正确地选择了提交按钮并正确地引起了点击事件。你可以通过在按钮的点击事件上放置console.log(正如其他人所提到的)来看到这一点。问题是,当按钮被程序性地点击时......(它确实被点击了)...... 它未能像您用鼠标手动点击时那样提交整个表单。 - ClearCloud8

0

这可能是一个错误,取决于您使用的jQuery版本。

查看关于同样问题的文章

无论如何,如果您想要提交表单,最简单的方法是使用.submit()方法。


谢谢回复。我认为这很可能是jQuery的一个bug。我查看了您发布的链接,他使用的是jQuery 1.4版本,该版本存在此bug。而我正在使用jQuery 1.8版本(您可以在我的jsFiddle示例链接中进行检查),该版本据说已经修复了此问题。 - ClearCloud8

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接