Application Example Using jQuery

Application functionality

• Gives users tasks of finding items in a web structure
• Goes to next task when user finds the item
• Logs page loads and user clicks in a database table

Code Overview

• Rails expects an authentication token for all Post requests. The token is attached as an additional parameter for requests.
• Javascript sends an XHR request for these two events:
• Just after the HTML is parsed (page ready)
• When a user clicks on a link

Code for the layout view

These lines of code go in the layout view for the pages that will be logged. They include the needed javascript code that responds to logged events.

  <%= javascript_include_tag 'page_timings' %>

  <%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? %>

Javascript for navigation pages

This is the javascript code that is loaded from the include line in the layout view.

# add authenticity token to Ajax requests
$(document).ajaxSend(function(event, request, settings) {
  if (typeof(AUTH_TOKEN) == "undefined") return;
  // settings.data is a serialized string like "foo=bar&baz=boink" (or null)
  settings.data = settings.data || "";
  settings.data += (settings.data ? "&" : "") + "authenticity_token=" + encodeURIComponent(AUTH_TOKEN);
});


$(function() {
    # execute when page is "ready"
    loadTime = (new Date).getTime();
    pageID = $("body")[0].id;
    $.post('/pages/event', {time:loadTime, page:pageID, event:"load"});

    # register click handler for all page links
    $("a").click(function (event) {
	clickTime = (new Date).getTime() - loadTime;
	targetID = event.target.id;
	$.post('/pages/event', {time:clickTime, page:targetID, event:"click"});
      })
  });

Controller action for logging events

The event controller action is called when a page is loaded (ready) and when a user clicks on a link. It logs the event by putting a record in the database.

  def event
    # set start time if it is nil
    if ! @utask.start
      @utask.start = Time.now
      @utask.save
    end

    ua = UserAction.new
    ua.user_task_id = @utask.id
    ua.page_id = params[:page]
    ua.time = params[:time]
    ua.title = params[:event]
    ua.save

    if params[:event] == "click" and 
        (params[:page] == @utask.page_id.to_s or 
         Time.now - @utask.start > 180)
        # reached the end, go to end of task method
        @utask.finish = Time.now
        @utask.save
    end      

    
    render :text => "OK"
  end