错误：无法在初始化之前调用对话框上的方法；试图调用方法“关闭”Jquery onclick 按钮

Question

我的要求是在单击取消按钮时打开对话框。单击“取消预订”后，应提交表单。

使用以下代码，我收到错误消息： 错误：无法在初始化之前调用对话框上的方法；试图调用方法'close'

我的 div 为：

<div id="dialog" title="Confirmation Required" style="display:none">
            Are you sure about this?
</div>

按钮为：

<input type="submit" id="btnCxlJob" name="btnCxlJob" value="Cancel" />

在 document.Ready 中：

$("#dialog").dialog({
        resizable: false,
        height: 140,
        modal: true,
        autoOpen: false,
        buttons: {
            'Cancel the Reservation': function() {

                $(this).dialog('close');
                document.JobConf.submit;

            },
            'Cancel': function() {
               $(this).dialog('close');
            }
        }
    });
    $("#btnCxlJob").click(function() {
        var theDialog = $("#dialog").dialog();
        alert("clicked!");
        theDialog.dialog("open");

    });

虽然我尝试了其他帖子的建议来解决这个错误，但无法摆脱这个错误。非常感谢任何帮助。谢谢

Answer 1

这是版本问题。将 jqueryui 1.9.2 与 jquery 1.9.1 一起使用，您没有问题。如果您同时使用两者的最新版本，那就更好了。

在我的测试中使用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Answer 2

您必须阻止提交按钮提交表单。将事件参数e添加到onClick中的函数中，并在其上使用preventDefault。

$("#btnCxlJob").click(function(e) {
    var theDialog = $("#dialog").dialog();
    alert("clicked!");
    theDialog.dialog("open");
    e.preventDefault();
});

将document.JobConf.submit; 替换为$("#<id of the form>").submit();

将其与分配给您的表单的 id 一起使用。如果是 JobConf，则代码为 $("#JobConf").submit();。