A collection of computer systems and programming tips that you may find useful.
 
Brought to you by Craic Computing LLC, a bioinformatics consulting company.

Sunday, February 22, 2009

A Rails, Ajax and RJS issue - seeing JavaScript in your HTML

Here's an example of the dangers of following tutorials too closely...

I want to use Ajax on a web page to monitor the completion of a job running on a remote server. For the purposes of this tip, all I want to do is change the text 'Running' to 'Completed'.

The div I want to update is called 'check_status_div' and starts out as:
<div id="check_status_div">Running</div>

Below it I have this block based on text in the Rails book:
<%= periodically_call_remote :url => { :action => 'check_status', :id => @job.id },
:update => 'check_status_div'
:frequency => 5,
:condition => "$('check_status_div').innerHTML == 'Running'"
%>

This ought to call the 'check_status' action in the controller, every 5 seconds and update the div 'check_status_div' until that div no longer contains the content 'Running'

In the Controller I have this:
  def check_status
@job = Job.find(params[:id])
if @job.completed?
render :update do |page|
page.replace_html 'check_status_div', "Completed"
end
end
end

This get the specified Job object, calls a method in the Model to determine if it is complete and, if so, replace the contents of the 'check_status_div' with the string 'Completed'.

To get this to work I also needed to add a custom route to routes.rb. Note that this is a POST.
map.resources :jobs, :member => { :check_status => :post }

That should work... but I get this:
try { Element.update("check_status_div", "Completed"); }
catch (e) { alert('RJS error:\n\n' + e.toString());
alert('Element.update(\"check_status_div\", \"Completed\");'); throw e }

That's not right...

The problem turns out to be that I am duplicating the ID of the DIV to be updated, first in the 'periodically_call_remote' call in the view, and again in the controller. Leave the controller and remove this line from the Ajax call in the View:
    :update => 'check_status_div'

It works... I'm not quite sure why. All the 'try' verbage is the JavaScript returned from the server and with that 'update' clause in the ajax call this is not getting evaluated.

Hope that helps.

1 comment:

alfred said...

That is, AJAX is now part of the guiding principle as web 2.0 flourishes and become a practical reality. With the power of AJAX, many of the business and marketing web site are integrated with AJAX application server platform now.

ajax jobs

Archive of Tips