Question

在我的网络应用中，我有一个可编辑对象列表，每个对象都有一个“编辑”链接。现在，当您单击“编辑”链接时，将弹出一个jQuery UI对话框，并显示该对象的编辑表单。在底部是“保存”和“取消”按钮。单击“保存”时，表单应该提交给服务器。这就是我无法做到的。

一些特殊情况是，当在其中一个列表项上单击“编辑”时，编辑表单将通过ajax加载到对话框div中，因此可能与此有关。以下是该应用程序的一些代码摘录。我正在使用Ruby on Rails 3.1。

观点：

<html>
...
<body>
    ...
    <div id="edit-campaign"></div>
    <script>
    $(function() {
    var buttons = { 
            "Save": function() { $("#edit-campaign-form").submit(); },
            "Cancel": function() { $("#edit-campaign").dialog("close"); }
              };
    createDynamicDialog("edit-campaign", buttons, "edit-campaign", "Edit Campaign");
    });
    </script>
</body>
</html>

createDynamicDialog函数（在另一个脚本文件中）：这是我使每个“编辑”链接将其编辑表单（href属性中的URL）加载到UI对话框中的那个。

createDynamicDialog = function(divId, buttons, cls, title) {
    $("." + cls).click(function(e) {
        e.preventDefault();
        var dialogOptions = {   
                                title: title,
                                width: 800,
                                height: 500,
                                modal: true,
                                autoOpen: true,
                                buttons: buttons
                            };
        var link = $(this);
        $("#" + divId).load(link.attr('href')).dialog(dialogOptions);
    });
};

这样，“取消”按钮工作正常（关闭对话框），但单击“保存”时未提交表单。为什么会这样？我有一个类似的对话框加载（ajax部分）加载页面，并只通过按钮切换。这很好。问题是只有在“点击”事件上加载表单时才会出现问题。为什么呢？

提前感谢您提供的任何帮助。我一直坚持这个......

Answer 1

您可以尝试更改此行代码：

"Save": function() { $("#edit-campaign-form").submit(); },

到

"Save": function() { $("#edit-campaign form").submit(); },

我不知道生成的表单会是什么样子，但是以这种方式更改保存按钮应该可行。 [我怀疑生成的表单没有您期望的ID]

更新/修改

反映我们在评论中所涵盖的内容：当未按预期捕获事件时，检查可能正在消耗该事件的其他侦听器非常重要。

jQuery UI对话框：使用对话框按钮提交表单

1 个答案:

更新/修改