Задать вопрос
AdilA
@AdilA
Нравится кодить, изучаю go c echo

Как сделать feed данных c javascript для ruby on rails 4?

ДД, проблема следующая, есть данные выводятся блоком как на картинке, как написать javascript для ruby , чтобы эти данные на страничке при добавлении новой записи в базу, новая запись меняла собой первую, и так далее
нужно чтобы шло обновление, этакий live feed(как в твитере), вот добавился новый элемент в базу, js удалил старый элемент на странице и вставил новый, 8 элементов на страницу
Помогите пожалуйста.g4o321osi9y6nzv984ptl2frc.jpg
Контроллер
class StaticPagesController < ApplicationController

  def home
    @feed_items = Post.order('id DESC').limit(8)
  end
end

/static_pages/home.erb
<div class="all_post_main"> 
        <ul>  
          <% if @feed_items.any? %>
          <%= render partial: 'posts/feed_item1', collection: @feed_items %>
          <% end %>
        </ul>
        </div>
<code lang="javascript">
<script>
setInterval(function() {
 lastId = $('.feed-item').first().data('id') 
 $.ajax({
   type: "GET",
   dataType: 'script',
   url: "<%= static_pages_home_path %>",
   data: { last_id: lastId }
 })
}, 5000);
</script>
</code>

/posts/_feed_item1.html.erb
<li <li class="feed-item" data-id="<%= feed_item1.id %>">
  <div class="row post_name">
    <div class="col-md-2">
    <%= avatar_for feed_item1.user, :size => "50x50" %>
    </div>
    <div class="col-md-6">
    <%= link_to (truncate feed_item1.name, :length => 90), feed_item1 %>
    </div>
    <div class="col-md-4">
    <div class="feed_price pull-right">
    <% if feed_item1.price.to_f == 0 %>
                 цена
                <% else %>
                <%= number_to_currency feed_item1.price %>
    <% end %>
    </div>
    </div>
    
  </div>
  <div class="row post_user">
    <div class="col-md-12">

      <%= truncate feed_item1.content, :length => 90 %>
    </div>
  </div>

</li>


/posts/feed1.html.erb
<% if @feed_items.any? %>
    <%= render partial: 'posts/feed_item1', collection: @feed_items %>
<% end %>


/static_pages.js.erb
alert('aaa');
Вот этот алерт срабатывает
а че дальше делать не знаю... да и что сделано при участии Замечательного человека было сделано)
  • Вопрос задан
  • 3216 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 1
AdilA
@AdilA Автор вопроса
Нравится кодить, изучаю go c echo
самым лучшим в итоге решением стал gem 'sync'
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
int03e
@int03e
Вопрос не совсем понятен. Как с помощью js вставить данные в нужном месте? Ну изменяете DOM в соответствии со своей разметкой. А чтобы при перезагрузке страницы была сортировка по новым данным - в запросе добавляете order по created_at.
def home
    @feed_items = Post.order('created_at DESC').paginate(page: params[:page])
end
Ответ написан
pushthebutton
@pushthebutton
Вы уже почти все сами написали.

setInterval(function() {
 lastId = $('.feed-item').first().data('id') 
 $.ajax({
   type: "GET",
   dataType: 'script',
   url: "<%= static_pages_home_path %>",
   data: { last_id: lastId }
 })
}, 5000);


Нужно добавить только callback.

setInterval(function() {
 lastId = $('.feed-item').first().data('id') 
 $.ajax({
   type: "GET",
   dataType: 'JSON', //<---------
   url: "<%= static_pages_home_path %>",
   data: { last_id: lastId },
   success: function(response) //<---------------
{
if (response != null)
{
$(response).each(function(i,o){
$(".container").append("<div>" + o.Name + "<br/> + o.Comment + "</div>");
});

}
 }), 5000);


div.container - список с уже существующими записями, которые выводятся пользователям
response - это JSON-объект, который формирует сервер. Судя по скриншоту, в нем должны быть поля цена, имя, текст и т.д.

Или вебсокетс во все поля.
Ответ написан
FanKiLL
@FanKiLL
Лучше уже использовать Server-sent events ActionController::Live для этого, чем трогать сервер каждые 5 сек. Когда запись добавится, через ActionController::Live сможете дёрнуть клиента и обновить данные. Погуглите в эту сторону.
railscasts.com/episodes/401-actioncontroller-live
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы