尝试创建一个表单，该表单会在更改后自动提交并重新加载页面

Question

我想要一个下拉框，当用户从中选择一个新选项时，它应该自动保存 （没有提交按钮）并且页面应该重新加载 。

但是，从下拉框中选择一个值实际上无济于事：它既不保存也不重新加载页面。 任何人都知道如何使下面的代码正常工作吗？

形成：

<%= form_for @user, method: :patch, url: set_preference_path do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <%= f.collection_select :default_relationship_id, @organizations, :id, :name, {onchange: "this.form.submit();"}, {class: 'form-control input-md'} %>
        # default_relationship_id is the column in users table to save to, @organizations are the selectable options, id is the value of the options to save, and name is the name to be displayed.
<% end %>

是否进行onchange: "this.form.submit();" 也许在使用collection_select时不起作用？ 我从中改编了此实现的示例（stackoverflow.com/a/24315219和stackoverflow.com/a/17663373）结合使用select和select而不是collection_select 。

控制器：

def overview
  @user = current_user
  @organizations = @user.organizations.where('fish = ?', true)
end

def set_preference
  @user = current_user
  @rel = Relationship.where('user_id = ? and organization_id = ? and fish = ?', @user.id, params[:user][:default_relationship_id], true).first
  @user.update_attributes(default_relationship_id: @rel.id)
  respond_to do |format|
    format.js { render inline: "location.reload();" }
    format.html { redirect_to overview_path(@user) }
  end
end

产生的html代码：

<form class="edit_user" id="edit_user_1" action="/set_preference/test1" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2*3;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="m/9ECijmnYQ==" />   
<select class="form-control input-md" name="user[default_relationship_id]" id="user_default_relationship_id">
<option value="1">Example1 business</option>
<option value="56">Example2</option>
</form>

Answer 1

使用jQuery，尝试处理onchange事件并尝试执行ajax发布

---

JavaScript片段：

/**
 * Assume jQuery script on head
 */
<script type="text/javascript">

  /**
   * Handle onchange on user_default_relationship_id
   */
  $("#user_default_relationship_id").change(function () {

    var data = $( this ).form.serialize();

    $.ajax({
      type: "POST",
      url: <%= set_preference_path %>,
      data: data,
      dataType: "application/json"
    })
    .done(function() {
      // handle done event ...
    })
    .fail(function() {
      // handle fail event ...
    })
    .always(function() {
      // handle event ...
    });

</script>

Answer 2

您是在options哈希中指定:onclick而不是html_options哈希（在其中指定了:class ），因此将其移至正确的哈希，但将options哈希保留为空白：

f.collection_select :default_relationship_id, @organizations, :id, :name, {}, {class: 'form-control input-md', onchange: "this.form.submit();"}

请参阅文档以获取完整的参数列表。

ETA collection_select不会选择@user.default_relationship_id的选定值，因为它引用了一种关系，但是您已经给了集合@organizations 。 由于collection_select不能从关系ID中找到关联的组织，因此默认情况下它选择第一个选项。 您应该重构，以便collection_select收到一个@relationships集合。 重构应该使您可以直接从强大的参数进行更新：

set_preference
  …
  @user.update user_relationship_params
  …
end

private
def user_relationship_params
  params.require(:user).permit(:default_relationship_id)
end

阅读表单助手以获取更多信息。