Topic: replacing a div element with a generated table

I need to write a javascript function that would generate a table between a <div> and </div> beacons.
It would have two parameters: a div_element parameter, and an array
it should replace the contents of the div_element with a table made of the array elements.

How do I tell him where to insert the html?

I've looked at the prototype.js, but there are some things I don't get:

Element.Methods= {
  replace: function(element, html) {
    element = $(element);
    if (element.outerHTML) {
      element.outerHTML = html.stripScripts();
    } else {
      var range = element.ownerDocument.createRange();
      range.selectNodeContents(element);
      element.parentNode.replaceChild(
        range.createContextualFragment(html.stripScripts()), element);
    }
    setTimeout(function() {html.evalScripts()}, 10);
  }
}

do I have to declare my function with Element.Methods = { ...} too in order to have it operate the div_element?

can I just define an html_table variable, store the generated html for the table in it, and then reuse this code replacing html with html_table?

How can I reuse the functions like $() defined in prototype.js?

Last edited by Galdred (2006-10-19 07:46:24)

Re: replacing a div element with a generated table

Do you want to do this all with JavaScript? Or can you use Rails RJS? It's much easier with that since you don't have to deal with JavaScript directly. Just place the table in a partial and render it like this:

page.replace_html :some_div, :partial => 'some_partial'

Railscasts - Free Ruby on Rails Screencasts

Re: replacing a div element with a generated table

I would prefer to do this with javascript, because I'm unsure about the way the replace_html functions in rails:
Most of the times, I use replace_html indeed, but in this case, I'd have to call the function 150 times for the same page as I need to call the function with different parameters each time the user's mouse hovers over a different hexagon of my map.
It won't make a huge difference, though, but the page will be heavier if I use html_replace, no?

Last edited by Galdred (2006-10-19 12:44:25)

Re: replacing a div element with a generated table

Oh, I see. If you want it on a mouse-over event then AJAX wouldn't be the way to go. It is possible to include RJS inline so it doesn't have to make a call back to the server, but I don't remember how to do that.

RJS basically just generates JavaScript, so to that extent it wouldn't be any different then writing the javaScript yourself.

Railscasts - Free Ruby on Rails Screencasts

Re: replacing a div element with a generated table

Okay, with a little testing I figured it out. If you want to use RJS, but don't want to use AJAX, you can include it directly in the original page like so:

<%= link_to('update foo', "#", :onclick => render(:update) { |page| page.replace_html :foo, 'bar' }) %>
<div id="foo">foo</div>

I recommend moving the render block into a helper to clean things up:

# in helper
def udpate_foo
  render :update do |page|
    page.replace_html :foo, 'bar'
  end
end

# in view
<%= link_to 'update foo', "#", :onclick => update_foo %>
<div id="foo">foo</div>


If nothing else, you can take a look at the javascript this rjs generates and customize the javascript directly.

Railscasts - Free Ruby on Rails Screencasts

Re: replacing a div element with a generated table

Thanks, it looks like a better idea indeed.

Re: replacing a div element with a generated table

Nice, this was just what I was looking for. But..

The link_to instead of link_to_remote causes the browser to jump (#) to the top of the page.. Anyone has any idea to stop this from happening? I wouldn't know how to get rails to end the JS-sequence with 'return false;' (as that would fix it I guess?)