Ruby On Rails - HOWTO Build Ajax Timer

This is a simple article to demonstrate how easy, simple and effective it can be utilising the web2.0 functionality made simple in Ruby On Rails.
What we are trying to achieve is a javascript timer, which we can use to fire ajax requests to make our screen appear dynamic or automatically update.


Include the Javascript libraries. This is best placed in your layout, so in a default project using the standard layout, open app/view/layouts/standard.rhtml. After the head tag put the following:


Create a form or link to initiate your timer. I created a form and a link to demonstrate the use of both types.
The partial used in the above example is as follows:


"examplestart", :html => { :multipart => true }) do |form| %> "examplesubmitbutton" %> { :controller=>"articles" , :action => "examplestop" } %>

When the ‘Start’ button is pressed, it does an AJAX request to the location specified by the :url tag in this case action ‘examplestart’.
The ‘Stop’ link also does an AJAX request to the action ‘example
stop’. We will define these two functions next.
The div at the end is the field we will be updating using AJAX and javascript.


Now we open our controller and write the actions ‘examplestart’ and ‘examplestop’.

def examplestart # initialize counter session[:counter] = 0 # initialize stop loop variable session[:stoptimer] = false render :update do |page| # update the status page.replacehtml 'exampleuse_me', 'Starting....' # disable the button page These actions are fairly straight forward. I define a conditional so we can stop our looping timer, set the counter to 0. I used the session variable purely for simplicity, as I didn't want to pass variables around - however you can do this, I just chose not to. I also enable and disable the start button depending on the state of our loop.


I refer to a Javascript function

page in the controller which we will need to define before we can use it.
'exampleinitializepolling()' uses a couple of other simple javascript functions which you will need to add. In this tutorial, I have used pure Javascript as I am still learning RJS.

Open up your applications local javascript file 'public/javascripts/application.js'

var etimerRunning = false var etimerID = null var edelay = 3000 function exampleinitializepolling(eseconds) { // Set the length of the timer, in seconds esecs = eseconds exampleStopTheClock() exampleStartTheTimer() } function exampleStopTheClock() { esecs = 0 if(etimerRunning) clearTimeout(etimerID) etimerRunning = false } function exampleStartTheTimer() { if (esecs0) { exampleStopTheClock() new Ajax.Request('/articles/updateexamplestatus', { method: 'post' }); //initializepolling(eseconds) } else { esecs = esecs - 1 etimerRunning = true etimerID = self.setTimeout("StartTheTimer()", e_delay) } }

There are a couple of constants you can configure here, to make you refresh slower or faster as needed. You can see the AJAX request posts to: ‘/articles/updateexamplestatus’.


Back in your controller you will need to define this action ‘updateexamplestatus’

def updateexamplestatus # count session[:counter] += 1 render :update do |page| if session[:stoptimer] false # update the status page.replacehtml 'exampleuseme', "Im Counting. At: #{session[:counter]}" # restart the timer page When the Ajax request calls this action, you will notice the 'clock' has stopped, and therefore we need to re-initialize it from within our controller - if the stop condition variable isn't set. I also put the counting logic, and update the div in this section, you could put anything you need here.