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

Question

In my web app, I have a list of editable objects, each with an "edit" link. 在我的Web应用程序中，我有一个可编辑对象的列表，每个对象都有一个“编辑”链接。 Now, when you click the "edit" link, a jQuery UI dialog pops up, and the edit form for that object is displayed. 现在，当您单击“编辑”链接时，将弹出一个jQuery UI对话框，并显示该对象的编辑表单。 On the bottom are "save" and "cancel" buttons. 底部是“保存”和“取消”按钮。 when "save" is clicked, the form is supposed to be submitted to the server. 当单击“保存”时，该表单应该提交给服务器。 That's what I'm unable to do. 那是我做不到的。

Some particularities are that the edit form is loaded onto the dialog div via ajax when "edit" is clicked on one of the list items, so maybe it has something to do with that. 一些特殊之处在于，当在列表项之一上单击“编辑”时，通过ajax将编辑表单通过ajax加载到对话框div上，因此也许与此有关。 Here are some code excerpts from the app. 这是该应用程序的一些代码摘录。 I'm working with Ruby on Rails 3.1. 我正在使用Ruby on Rails 3.1。

The view: 风景：

<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>

The createDynamicDialog function (in another script file): This is the one where I make each "edit" link load their edit forms (URL in the href attribute) onto UI dialogs. 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);
    });
};

With this, the "cancel" button works fine (closing the dialog), but the form isn't submitted when I click "save". 这样，“取消”按钮可以正常工作（关闭对话框），但是当我单击“保存”时不提交表单。 Why could this be? 为什么会这样呢？ I have a similar dialog that is loaded (the ajax part) when the page is loaded, and is only toggled through a button. 我有一个类似的对话框，该对话框在页面加载时被加载（ajax部分），并且只能通过按钮进行切换。 That works fine. 很好 The problem is only when the loading of the form is done on the "click" event. 问题仅在于在“ click”事件上完成表单加载时。 Why? 为什么？

Thanks in advance for any help you can give me. 预先感谢您可以给我的任何帮助。 I've been stuck on this forever... 我一直坚持下去...

Answer 1

You could try changing this line of code: 您可以尝试更改以下代码行：

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

to 至

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

I can't tell what the generated form would look like, but changing the save button in this way should work. 我无法确定生成的表单是什么样子，但是以这种方式更改保存按钮应该可以工作。 [I suspect the generated form doesn't have the id you expect] [我怀疑生成的表单没有您期望的ID]

update/edit 更新/编辑

To reflect what we covered in the comments: When events are not being captured as expected, it's important to check for other listeners that may be consuming the event. 为了反映我们在注释中涉及的内容：当未按预期捕获事件时，检查可能正在使用该事件的其他侦听器很重要。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2011-10-30 22:35:07

update/edit 更新/编辑

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2011-10-30 22:35:07

update/edit 更新/编辑

解决方案1
0 已采纳 2011-10-30 22:35:07