1

嗨，我正在开发 Rails 4.0 应用程序。我有一个包含 form_tag 的 jQuery UI 模态表单。表单中有一个文本字段标签，用户可以在其中输入电子邮件列表。然后提交表单并在控制器中使用 params[:email]。

我已经能够弹出一个窗口来显示表单，但我不确定如何提交数据。我是 jQuery 和 Ajax 相关请求的菜鸟。请让我知道如何做到这一点。我附上了与此相关的代码。

导轨视图：

索引.html.erb

<%= link_to 'Add New Roles', add_role_path, method: :post, id: 'add_role_view' %>

添加角色部分

<div id="dialog_form">
    <%= form_tag(add_role_path, method: :post, remote: true, html: { class: "form-horizontal"}) do %>
        <div class="control-group">
            <%= label_tag :email, "Editors email", class: "control-label" %>
            <div class="controls">
                <%= text_field_tag(:email, nil, placeholder: "Enter Reviewer's email; multiple emails divided by comma ", class:"input-block-level") %>
            </div>
        </div>
        <% end %>
</div>

Role.js 

$(document).ready(function() {
    $('#dialog_form').hide();
    $('#add_role_view').click(function() {
        $('#dialog_form').dialog( {
            show : "slide",
            hide : "toggle",
            width: 800,
            height: 200,
            modal: true,
            title: "Add New Editor",
            buttons: {
                "Add": function()
                {
                    ## CODE TO SUBMIT THE FORM USING AJAX
                },
                "Cancel" : function()
                {
                    $("#dialog_form").dialog("close");
                }
            }
        }).prev().find(".ui-dialog-titlebar-close").hide(); // To hide the standard close button
            return false
    });
});

Rails 控制器动作

  def add_role
    emails = params[:email].split(/,\s*/)
    role = Role.where(name: "XYZ")
     emails.each do |email|
       user = User.where(email: email).first
       user.roles << role
     end
    redirect_to :back,  notice: "Added Role XYZ to the User emails specified"
  end

如果有任何信息不清楚，请在评论中告诉我，我会相应地对其进行编辑。请不要投票取消/拒绝该问题。先感谢您。

4

2 回答 2

1

作为您的表单标签，您添加了 remote :true 所以我认为您不需要通过 Ajax 提交表单。

如果 remote=>true 不起作用或删除 remote=>true 有任何问题

$(document).ready(function() {
    $('#dialog_form').hide();
    $('#add_role_view').click(function() {
        $('#dialog_form').dialog( {
            show : "slide",
            hide : "toggle",
            width: 800,
            height: 200,
            modal: true,
            title: "Add New Editor",
            buttons: {
                "Add": function()
                {
                  $(".form-horizontal").submit();

                },
                "Cancel" : function()
                {
                    $("#dialog_form").dialog("close");
                }
            }
        }).prev().find(".ui-dialog-titlebar-close").hide(); // To hide the standard close button
            return false
    });
});
于 2013-10-30T11:20:02.277 回答
0

此时需要编写Ajax代码提交表单

$("#FORM_ID").submit()

或者在你的情况下：

$("#dialog_form").submit();

此行将您的表单与所有字段一起提交到服务器，然后您必须在服务器端获取所有值。

于 2013-10-30T09:15:35.180 回答