Лучшие практики для загрузки содержимого страницы через AJAX-запрос в Rails3?

Question

Предположим, у вас есть страница с двумя столбцами контента.По какой-то причине вы хотите получить содержимое HTML одного из этих столбцов после загрузки страницы с помощью запроса AJAX.Пользователю не нужно предпринимать действия для загрузки контента (без щелчка по ссылке или отправки формы), это просто происходит автоматически.

Я легко могу сделать это, возвращая пустой заполнитель div в основном ответе

<div id="pink-dancing-elephants"></div>

, а затем добавьте немного jQuery на страницу

$.ajax({
    url: "/elephants/dancing/pink",
    cache: false,
    success: function(html){
      $("#pink-dancing-elephants").append(html);
    }
});

и получите действие, которое в ответах на / elephants / Dance / Pink возвращает соответствующий BLOB-объект HTML.1010 * Это все работает нормально, но мне интересно, если я пропускаю какую-то функцию Rails3, которая бы упростила это.Например, я ищу возможность иметь возможность поместить что-то вроде следующего в основной вид и сделать все остальное "магией"

<%= render :url=>"/elephants/dancing/pink", :remote => true %>

Я что-то упустил?

Answer 1

Я использую метод, описанный в комментарии @ cailinanne к посту Дана Л., и он хорошо сработал для меня.Мне нравится удобочитаемость тега данных, который прикреплен к div.В вашем html вы можете точно увидеть, что будет загружаться в этот div, и вам не нужно добавлять какой-либо новый JS, если вы хотите добавить эту функциональность к нескольким div или страницам.

Из этой статьи:http://tech.thereq.com/post/16479390885/loading-page-content-via-ajax-in-rails-3-1

Самый простой способ сделать это - использовать метод загрузки jQuery.

$("#comments").load("/blogs/2/comments");

Неудобной частью является путь AJAX (/ blogs / 2 / comments), который явно меняется в соответствии сна какой блог мы просматриваем.Если бы мы точно следовали документации jQuery, мы могли бы просто поместить тег скрипта в середину нашего тела HTML, чтобы в нашем файле шаблона у нас могло быть что-то вроде

# show.html.erb

<div id="comments"></div>
<script>
  $("#comments").load("<%= blog_comments_path(@blog)%>");
</script>

Yuck.Не фанат javascript, смешанного с моими файлами шаблонов.

Что делать вместо этого?Следуйте шаблону, предложенному Rails UJS, и используйте новые атрибуты данных HTML.

Во-первых, когда вы хотите загрузить содержимое AJAX на своей странице, сделайте следующее в своем шаблоне

#show.html.erb

<div id="comments" data-load="<%= blog_comments_path(@blog. :format => :js)%>">
</div>

Во-вторых, добавьте следующее в ваш application.js

# application.js or any JS file loaded within application.js

$("div[data-load]").filter(":visible").each(function(){

  var path = $(this).attr('data-load');
  $(this).load(path);

});

В-третьих, настройте маршрут, который соответствует запросу get для blog_comments (введите rake routes, чтобы увидеть, как называются ваши маршруты)

# routes.rb

# ajax load at page load
  get "/blogs/comments" => "blogs#comments"

И вуаля!Ваш комментарий div будет волшебным образом заполнен тем, что будет возвращено путем / blogs / 3 / comments!

Answer 2

Я думаю, что то, что я первоначально обрисовал в общих чертах, на самом деле является лучшим подходом.

Сначала поместите пустой div-заполнитель в главном представлении

<div id="recent_posts"></div>

, а затем добавьте немного jQuery на страницу

$.ajax({
    url: "/posts/recent",
    cache: false,
    success: function(html){
      $("#recent_posts").append(html);
    }
});

и действие, при котором ответы на / posts / недавние возвращают блоб HTML, который вы хотите заполнить div.В действии, которое вызывается запросом AJAX, вы хотите выполнить рендеринг с помощью: layout => false, чтобы не дать возвращаемому блобу HTML включить весь кадр.Например,

# posts_controller.rb
def recent
  @recent_posts = #whatever
  render :layout => false
end

Это приведет к отображению шаблона в views / posts / latest.html.erb, а затем jQuery позаботится о вставке отображаемого содержимого в ваш div-заполнитель.

Answer 3

Существует простой способ получения ресурсов, просто добавьте respond_to :html, :js к своему контроллеру и создайте представления * .js.erb в каталоге app / views /. После этого ваш контроллер сможет отвечать на запросы в формате javascript, и вы сможете написать javascript с кодом ruby ​​в файлах * .js.erb.
Проверьте это: Ненавязчивый JavaScript в Rails 3

Answer 4

Если вы хотите использовать подход, предложенный OP, я бы рекомендовал перенести его в отдельный файл application.js и использовать ненавязчивый JS.Я бы не советовал размещать JS на самой странице.

# index.html.erb
<div id="content"></div>

# application.js
$(function() {
  $.ajax({
    url: "...",
    success: function (html) {
      $("#content").append(html);
    }
  });
});

# controller.rb
# empty placeholder
def index
end

Это автоматически запускает запрос ajax без необходимости помещать его на каждой странице.Это лучшая практика.Я бы не назвал это оптимальным, но лёгкий м