RJS not updating html table elements

Question

I have a link_to_remote function that updates columns in a table. However, it does not properly update the cell or its properties.

For example:

Here is the element I am updating:

 <div id= "calendar_div_<%= i%>_<%=j%>" style = "display :inline;"><td class="checkedout">X</td></div>

Using this call:

  <%= link_to_remote 'Current Week', :url => { :action => :current_week } %>

Calls:

render :update do |page|

                    page["Week_div"].replace_html session[:next_week].to_s

                    for i in 0..23 do
                            for j in 0..6 do
                                    page["calendar_div_"+i.to_s+"_"+j.to_s].replace_html '<td class="available">Available</td>'
                            end
                    end

However, it never updates the <td> tag properly. The element never updates the text properly nor does it color code the element (td.available is defined to have a background color of green).

Answer 1

Make sure you have Prototype included in your application.

<%= javascript_include_tag :defaults %>

Also if you don't have valid HTML sometimes prototype will have trouble traversing the DOM. Try validating the page, specifically fixing any tags which don't have a closing one.

Beyond that you can try to isolate the problem by experimenting. Try this for example.

<div id="calendar_div_0_1"><td class="checkedout">X</td></div>
<%= link_to_function "update", "$('calendar_div_0_1').update('<td class=\"available\">Available</td>');" %>

That works for me.

Answer 2

In order to do this, ryanb was mostly correct. You can't do it using <div><td> tag order. Rather you need to use an id for the <td> tag.

However, this was STILL not correctly updating the cell to overwrite the color; the previous background was still appearing, with the new overriding the area where they overlapped. To properly replace the entire element use the following syntax instead:

 $("calendar_div_0_1").replace("<td class=\"available\">Available</td>");

Rather than using update, use replace.