jQuery UI Dialog form in Rails

Question

Hi I am working on a Rails 4.0 application. I have a jQuery UI modal form containing a form_tag. There is a text field tag in the form where the user enters a list of emails. The form is then submitted and the params[:email] is used in the controller.

I have been able to pop up a window to display the form but I am not sure how to submit the data. I am a noob with jQuery and Ajax related requests. Please let me know how to do this. I have attached the code related to this.

Rails views:

Index.html.erb

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

Add Role Partial

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

  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

If any information is unclear please let me know in the comments and I shall edit it accordingly. Please do not vote to cancel out/reject the question. Thank you in advance.

Answer 1

As your form tag, You have added remote :true so i don't think you need to submit form throung Ajax.

If remote=>true not working or any issue's with that remove 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
    });
});

Answer 2

At this point you need to write Ajax code to submit the form

$("#FORM_ID").submit()

or in your case:

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

This line submits your form to server with all field then you have to get all value at server side.