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.