#229 Polling for Changes

Aug 30, 2010 | 16 minutes | Ajax

If you have frequently changing data on the server side, it's helpful to automatically display this to the user as well. Here I show how to accomplish this with polling in jQuery.

Click to Play Video ▶

Download:
source codeProject Files in Zip (107 KB)
mp4Full Size H.264 Video (24.3 MB)
m4vSmaller H.264 Video (16.5 MB)
webmFull Size VP8 Video (41.4 MB)
ogvFull Size Theora Video (34.3 MB)

Browse Source Code

There is a newer version of this episode, see the revised episode.

Resources

          bash
        
bundle install
rails g jquery:install

          Gemfile
        
gem 'jquery-rails'

          comments_controller.rb
        
def index
  @comments = Comment.where("article_id = ? and created_at > ?", params[:article_id], Time.at(params[:after].to_i + 1))
end

          layouts/application.html.erb
        
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>

          articles/show.html.erb
        
<div id="article" data-id="<%= @article.id %>">
...
<div class="comment" data-time="<%= comment.created_at.to_i %>">

          comments/index.js.erb
        
<% unless @comments.empty? %>
$("#comments").append("<%=raw escape_javascript(render(@comments)) %>");
$("#article h2").text($(".comment").length + " comments");
<% end %>

          javascript
        
$(function() {
  if ($("#comments").length > 0) {
    setTimeout(updateComments, 10000);
  }
});

function updateComments () {
  var article_id = $("#article").attr("data-id");
  if ($(".comment").length > 0) {
    var after = $(".comment:last-child").attr("data-time");
  } else {
    var after = "0";
  }
  $.getScript("/comments.js?article_id=" + article_id + "&after=" + after)
  setTimeout(updateComments, 10000);
}