Question

这几乎是问题所在的问题：https://stackoverflow.com/questions/28571985/rails-remote-true-equivalent，但没有人回答。但我希望这并不意味着这个问题是不可能的。

我有一个页面，可以将人员列表拖放到垃圾箱中。删除时会自动生成连接表中的赋值。不过，我希望页面不会重新加载。在ruby中，我会使用remote执行此操作：true，但重定向此处发生在我的javascript文件中。我相信一切都设置正确，只要我可以放远程：在.js文件中window.location.pathname行的末尾为true。

z_game_sessions.js

app.gameSession = {
  dragDrop: function () {
    $('.groups-students').sortable({
      tolerance:"pointer",
      revert: true
    });

    $('.draggables').draggable({
      connectToSortable: '.groups-students',
      revert: 'invalid',
      stop: function (e) {
        var id = e.target.id;
        var groupId = $(this).closest('ul').attr('id');

        if (groupId) {
          window.location.pathname = "game_sessions/add_player/" + groupId + "/" + id;
        }
      }
    });

  }
}

game_sessions_controller.rb

  def add_player
    @game_session = Group.find(params[:group_id]).game_session
    GroupAssignment.assign(params[:group_id], params[:student_id], @game_session.id)
    respond_to do |format|
      format.js
    end
  end

add_player.js.erb

$("#new-group-form-container").html("<%= j(render partial: 'new_group_form', locals: {f: @game_session}) %>");

_new_group_form.html.erb

<%= f.simple_fields_for :groups do |ff| %>
  <div class="mdl-cell mdl-cell--4-col mdl-shadow--4dp group-assignment-forms" id="group<%= "#{ff.object.id}" %>">

      <h3>Group</h3>


      Password: <%= ff.object.password %>
      <%= ff.input :name, label: "Group Name", wrapper_html: { class: "mdl-textfield mdl-js-textfield mdl-textfield--floating-label" }, input_html: { class: "mdl-textfield__input" }, label_html: { class: "mdl-textfield__label" } %>
      <%= ff.input :_destroy, as: :boolean, label: "Remove Group" %>

      <h4>Students</h4>

      <ul class="groups-students student-drag-area" id="<%= "#{ff.object.id}" %>">
        <% ff.object.students.each do |student| %>
          <li class="draggables" id="<%= student.id %>"><%= student.full_name %></li>
        <% end %>
      </ul>

  </div>
<% end %>

Answer 1

首先，它应该是一个POST请求。改变路线。

其次，让你的控制器返回html，然后只是做一个ajax请求并在成功时分配重新调整的html。

所以而不是：

window.location.pathname = "game_sessions/add_player/" + groupId + "/" + id;

应该是这样的：

$.ajax({
  url: "game_sessions/add_player/" + groupId + "/" + id,
  type: "POST",
  success: function(data) {
    $("#new-group-form-container").html(data)
  }
});

使用remote：true来自.js文件

1 个答案: