Rails / Ajax

Rails / Ajax  edit   (Category  edit)

Contents 1 2 You can't use Ajax.Updater to update a table in IE! 3 Ajax effects: Drag and drop 4 Indicator icons

http://svn.tylerrick.com/public/rails/examples/ajax/ajax_examples/

You can't use Ajax.Updater to update a table in IE!

Let me clarify... The following code works just fine in Firefox, but does not work in IE:

app/views/test/ajax.rhtml:
<table id="table_without_tbody">
  <tr id="tr1">
    <td>
      Static content
    </td>
  </tr>
</table>
<%= link_to_remote "add to :bottom of 'table'", :update => 'table_without_tbody', :url => {:action => 'an_ajax_action'}, :position => :bottom %>

app/controllers/test_controller.rb:                                                                                                     
class TestController < ApplicationController
  def an_ajax_action
    render :layout => false
  end
end

app/views/test/an_ajax_action.rhtml:
Content to be added via Ajax

Symptoms: Nothing happened when I clicked the link. The request showed up in the logs and there were no errors server side, but no changes in the DOM were visible. I didn't even get an alert saying "RJS Error" like some people have reported.

The solution is to update the tbody instead of the table directly:

app/views/test/ajax.rhtml:
<table id="table_with_tbody">
<tbody id="tbody">
  <tr id="tr">
    <td>
      Static content
    </td>
  </tr>
</tbody>
</table>
<%= link_to_remote "add to :bottom of 'tbody'", :update => 'tbody', :url => {:action => 'an_ajax_action'}, :position => :bottom %>
<%= link_to_remote "add :after 'tr'", :update => 'tr', :url => {:action => 'an_ajax_action'}, :position => :after %>

References:

• Prototype Insertion, IE 6, tr’s, and “invalid target element for this operation…”
• IE fails to insert a table row using prototype
• innerHTML IE Problem

Ajax effects: Drag and drop

• a drag-n-drop demo (download) of acts_as_ordered_tree: svn://rubyforge.org/var/svn/ordered-tree/demo
• that was based on: http://ajaxonrails.wordpress.com/2006/11/26/ajaxonrailsdragdroptree/

Indicator icons

http://www.napyfab.com/ajax-indicators/ A bunch of (free -- I assume) animated indicator icons you can use to indicate that an Ajax call is currently in process / working in the background.