在.js文件中使用remote: true

Using remote: true from .js file

本文关键字：remote true js 文件      更新时间：2023-09-26

这几乎是一个相同的问题在这里问: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 %>

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

第二，让你的控制器返回html，然后在成功时做一个ajax request&assign返回的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)
  }
});
相关文章：