0

我在使用带有表单的 jQuery 对话框时遇到了问题。问题是，由于某种原因，当我最初打开对话框时，缺少 html 表单标签。但如果我关闭它并再次打开它，它们就在那里。这是非常有问题的，因为第一次，表单不会提交，但第二次会。这是我的实现：

我从一个打开对话框的链接开始：

<%= link_to "Link", {:controller => "controller", :action => "popup"}, :remote => true %>

在我的控制器内部，我执行以下操作：

def popup
   respond_to do |format|
      format.js
   end
end

它将响应 js 格式并启动 popup.js.erb，它执行以下操作：

$('.modal').html("<%= escape_javascript(render(:template => '_popup_form.html.erb')) %>");
$('.modal').dialog({modal: true});

我还会注意到我的初始链接下方有以下内容：

<div class="modal" style="display: none;"></div>

弹出窗口将呈现以下内容：

<div id="dialog">
    <%= form_tag(:controller => 'controller', :action => 'action', :remote => true) do %>
        <p>Message</p>
        <%= text_field_tag(:text, nil, {:placeholder => "Text", :style => "width: 90%;"}) %> </p>
        <%= submit_tag("Submit", {:class => 'input_button'}) %>
    <% end %>
</div>

有了所有这些，模态确实显示了正确的消息、编辑文本字段和提交按钮，但由于某种原因，表单不存在，如下所示：

<div id="dialog">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="✓">
        <input name="authenticity_token" type="hidden" value="token">
    </div>
    <p>Message</p>
    <input id="text" name="text" placeholder="Text" style="width: 90%;" type="text"> <p></p>
    <input class="input_button" name="commit" type="submit" value="Submit">
</div>

但是在关闭它并重新打开它时，它会正确显示并具有所需的行为。如此处所示：

<div id="dialog">
    <form accept-charset="UTF-8" action="/controller/action?remote=true" method="post">
        <div style="margin:0;padding:0;display:inline">
            <input name="utf8" type="hidden" value="✓">
            <input name="authenticity_token" type="hidden" value="token">
        </div>
        <p>Message</p>
        <input id="text" name="text" placeholder="Text" style="width: 90%;" type="text"> <p></p>
        <input class="input_button" name="commit" type="submit" value="Submit">
    </form>
</div>

我似乎找不到原因。对此的任何帮助将不胜感激。

4

2 回答 2

1

This is due to when you render the template first, and set the modal to true, the dialog will have modal behavior and other items on the page will be disabled.

try look into this document. http://docs.jquery.com/UI/API/1.7.2/Dialog

于 2013-04-27T16:17:08.730 回答
0

我通过将两行的顺序反转为以下来使其工作：

$('.modal').dialog({modal: true});
$('.modal').html("<%= escape_javascript(render(:template => '_popup_form.html.erb')) %>");

我不明白为什么这有效，但至少它有效。

于 2013-04-27T15:00:06.353 回答