javascript - 使用远程 : true from . js 文件

Question

这几乎与此处提出的问题相同:https://stackoverflow.com/questions/28571985/rails-remote-true-equivalent ，但没有人回答。不过，我希望这并不意味着这个问题是不可能的。

我有一个页面，可以将人员列表拖放到垃圾箱中。当它们被删除时，连接表中的分配会自动生成。不过，我希望页面不要重新加载。在 ruby​​ 中，我会使用 remote: true 来执行此操作，但此处的重定向发生在我的 javascript 文件中。我相信一切都设置正确，只要我能把 remote: true 放在 .js 文件中我的 window.location.pathname 行的末尾就好了。

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请求。改变你的路线。

其次，让您的 Controller 返回 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)
  }
});