Rails - Dec 2005 - RJS Templates and the Replace semantics

I have an issue with the way replace_html works in an RJS template.
This is a copy of a post on my blog (http://blog.craz8.com
<http://blog.craz8.com/> ) that describes the problem and my working
solution to the problem.

If I have a collection of things that are output like this:

<div id="things">
<% @things.each do |thing| %>
  <%= render :partial => ''thing'' %>
<% end %>
</div>
 
Or
 
<div id="things">
<%= render :partial => ''thing'', :collection =>
@things %>
</div>
 

I can use AJAX to insert a new ''thing'' by implementing an RJS
template
that does this, reusing the same partial layout:

  page.insert_html :bottom, :partial => ''thing''

but I can''t then replace the inserted thing by doing this, as this is
implemented as element.innerHTML:

  page.replace_html "thing-id", :partial =>
''thing''

There are ways around this, but they involve moving the outer element of
the thing out of the partial code, splitting the HTML across two files,
or removing and re-adding the element:

  page.remove "thing-id"
  page.insert_html :bottom, :partial => ''thing''

I don''t like either of these ideas, so I came up with an improvement
that replaces the entire element in the DOM, similar to IE''s
element.outerHTML:

  page.replace_html_element "thing-id", :partial =>
''thing''
 

So, I''ve written an implementation of replace_html_element that comes
in
two parts: 

*	The addition to the JavaScriptGenerator class to add a
replace_html_element method
*	An update to the Prototype Element implementation to perform the
client side update.

Add this code to the Application.rb (or in a separate file required by
Application.rb): 

 

# Update the JavaScriptGenerator to add our own functionality
module ActionView
  module Helpers
    module PrototypeHelper
      class JavaScriptGenerator
        def replace_html_element(id, *options_for_render)
          html = render(*options_for_render)
          record "Element.replace(#{id.inspect}, #{html.inspect})"
        end
      end
    end
  end
end  
 

Add this code to your application javascript file: 

 

// Extend the object for our RJS extension to work
Object.extend(Element, {
  replace: function(element, html) {
      var el = $(element);
      if (el.outerHTML) { // IE
        el.outerHTML = html.stripScripts();
    } else {  // Mozilla
          var range = el.ownerDocument.createRange();
        range.selectNodeContents(el);
 
el.parentNode.replaceChild(range.createContextualFragment(html.stripScri
pts()), el);
    }
    setTimeout(function() {html.evalScripts()}, 10);
  }
 }
);

 



_______________________________________________
Rails mailing list
Rails-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails