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结合使用，而不是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，尝试handle onchange event并尝试ajax post

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

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

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

有关完整参数列表，请参阅documentation。

ETA @user.default_relationship_id选择的值collection_select未被@organizations选中，因为它指的是一段关系，但您已经收到了collection_select collection_select 1}}。由于@relationships无法从关系ID中找到关联的组织，因此默认情况下会选择第一个选项。您应该重构，以便set_preference … @user.update user_relationship_params … end private def user_relationship_params params.require(:user).permit(:default_relationship_id) end收到var g=angular.element(document.createElementNS("http://www.w3.org/2000/svg", "g")); var line=$compile('<line ng-attr-x1={{$scope.array[array.length-1].x1}} ng-attr-y1={{$scope.array[array.length-1].y1}} ng-attr-x1={{$scope.array[array.length-1].x2}} ng-attr-x1={{$scope.array[array.length-1].y2}} style="with mandatory styling for line">')($scope); g.append(line); parentg.append(g);个收藏集。重构应该是你可以直接从强参数更新：

var line=angular.element(document.createElementNS("http://www.w3.org/2000/svg", "line"));
line.attr('ng-attr-x1','scopeVariable');
line.attr('ng-attr-x2','scopeVariable');
line.attr('ng-attr-y1','scopeVariable');
line.attr('ng-attr-Y2','scopeVariable');

阅读form helpers了解更多信息。

尝试创建一个在更改时自动提交和重新加载页面的表单

2 个答案: