在 Rails 中触发选择框的更改事件后，如何使用 jQuery UJS 通过 AJAX 提交表单？

Question

如何在 Rails 中触发选择框的更改事件后使用 jQuery UJS 提交表单？

我的观点是这样的：

<% for perm in @permissions %>
  <%= form_for [@brand,perm], { :remote => true } do |f| %>
    <tr id="permission_<%= perm.id %>">
      <td><%= perm.configurable.name %></td>
      <td><%= f.select :action, ['none', 'read', 'update', 'manage'] %></td>
    </tr>
  <% end %>
<% end %>

非常简单。我的控制器是这样的：

class PermissionsController < ApplicationController

    before_filter :authenticate_user!

    respond_to :html, :js

    load_and_authorize_resource :brand
    load_and_authorize_resource :permission, :through => :brand

    def index
    end

    def update
      @permission = Permission.find(params[:id])
      @permission.update_attributes(params[:permission])
    end

end

在我的 application.js 中：

// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
$(function() {
  $("#permission_action").change(function() {
    this.form.submit(); // This needs to be an AJAX call, but how?
  });
})

请注意，表单提交可以正常触发。但它正在做一个常规的帖子，而不是一个 AJAX 提交。当我在表单上放置一个提交按钮并使用它时，AJAX 提交工作正常。我需要改变：

this.form.submit();

到 AJAX 调用，但我不知道如何。有人可以帮忙吗？

Answer 1

查看 jquery-ujs 源代码，我认为这可能是最安全的方法：

// in application.js
jQuery.fn.ajaxSubmit = function() {
    this.trigger('submit.rails');
};

它只是像 .submit() 一样触发事件，但具有 ujs 风格，所以你会调用

$('.my_form').ajaxSubmit();

Answer 2

我看到您已经在使用 jQuery，这很好。以下代码取自这里：http://railscasts.com/episodes/136-jquery

我强烈建议您熟悉这些屏幕投射，它们对您有很大帮助（轻描淡写）。

// public/javascripts/application.js
jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#new_review").submitWithAjax();
})