Как сделать перезагрузку страницы с помощью Javascript или Ruby на рельсах

Question

Я пытаюсь перезагрузить страницу после сортировки по новой позиции, либо через Javascript, либо в коде Ruby on Rails.

$("#serialize").click ->
c = set: JSON.stringify($("#sortable").nestedSortable("toHierarchy",
  startDepthCount: 0
))
$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")
false

Я думаю добавить его сюда

$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")
window.location.reload(false); 
false

Но похоже, что это портит порядок. Вот мой код рельсов

class SiteController < ApplicationController

def savesort
neworder = JSON.parse(params[:set])
prev_item = nil
neworder.each do |item|
  dbitem = Category.find(item['id'])
  prev_item.nil? ? dbitem.move_to_root : dbitem.move_to_right_of(prev_item)
  sort_children(item, dbitem) unless item['children'].nil?
  prev_item = dbitem   
end
Category.rebuild!
render :nothing => true
  end
end

Я также думаю об изменении рендера: ничего => true для redirect_to root_url, но, похоже, это тоже не работает.

вот мой Routes.rb (укороченный ради космоса)

locksmithing::Application.routes.draw do
  get "site/home"
  match "/savesort" => 'site#savesort'
    root to: 'site#home'
end

Итак, куда мне добавить код для обновления страницы? Javascript или в контроллере сайта? или есть другое решение? Заранее спасибо.

Answer 1

Прежде всего, ваш $.post звонок не делает того, чего вы, вероятно, ожидаете. Это:

$.post "savesort", c, $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

такой же, как этот:

$.post "savesort", c

Я думаю, что вы намереваетесь выполнить $('#output').html(), когда асинхронный вызов $.post завершится, но для этого вам нужна функция обратного вызова. Эта часть вашего $.post:

$("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

будет выполняться, пока создается вызов $.post, а его возвращаемое значение будет объектом jQuery, с которым $.post не будет знать, что делать. Чтобы это исправить, просто оберните ваш обратный вызов, ну, в общем, обратный вызов:

$.post "savesort", c, ->
    $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

Если вы добавите window.location.reload(false) сразу после $.post, то перезагрузите страницу до завершения процедуры POST, и это, вероятно, не то, что вы хотите сделать, и это объяснило бы вашу проблему с «запутанным порядком». Попробуйте переместить это в обратный вызов $.post, чтобы он выполнялся после завершения POST:

$.post "savesort", c, ->
    $("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")
    window.location.reload(false)

Ваш исходный код полностью игнорировал ответ от SiteController#savesort, поэтому не имеет значения, что он ничего не возвратил, что-то вернул или перенаправил. Вышеуказанные изменения обратного вызова все еще игнорируют то, что возвращает контроллер, но это нормально, и :nothing => true - разумная вещь для этого.

Как только все это заработает, вы можете заменить перезагрузку, если ваш контроллер вернет новые данные для вставки на страницу, а затем обратный вызов $.post может вставить эти новые данные на страницу. Это был бы довольно стандартный подход AJAX.

Answer 2

Поскольку вы post отправляете на свой сервер, ваш сервер может отправлять небольшую часть, чтобы повторно отобразить только ту часть страницы, которая изменилась.

Адаптируйте действие вашего контроллера, не объявляя никакого действия рендеринга / перенаправления:

class SiteController < ApplicationController

  def savesort
    neworder = JSON.parse(params[:set])
    prev_item = nil
    neworder.each do |item|
      dbitem = Category.find(item['id'])
      prev_item.nil? ? dbitem.move_to_root : dbitem.move_to_right_of(prev_item)
      sort_children(item, dbitem) unless item['children'].nil?
      prev_item = dbitem   
    end
    Category.rebuild!
  end
end

Теперь будет выглядеть представление по умолчанию, которое называется savesort.js.erb. В этом представлении вы можете сделать что угодно, чтобы переписать список категорий.

Этот файл содержит чистый JavaScript, который выполняется в браузере, например:

$("#output").html("<p id=\"flash_notice\">Saved Successfully</p>")

Конечно, на самом деле вы хотели бы, чтобы он также обновлял более релевантные части экрана.

Это предпочтительный способ, безусловно. Это сделает только частичное обновление экрана и будет наиболее восприимчивым к пользователю.