[Rails3] Confused by RJS vs Unbstrusive jQuery and such

rubyonrails-talk
1

I am developing a small blog with a cool feature to edit articles in the page through ajax.

So I made my Raisl3 app load jQuery and opened AWDWR3 to learn whether anything had changed.

So I create an RJS template: edit.js.rjs with:

page.replace_html("article_#{@article.id}", render('admin/articles/form'))

Obviously when I clicked my edit button that triggers the ajax replacement of the article by an editable form it failed.

My first surprise was to be greeted by an "Element.update is not a function" error. I then realized that I cannot use page.replace_html which is reserved to Prototype.

No big deal I'll create an edit.js.erb file with:

$("#article_<%= @article.id %>").update("<%= render('admin/articles/form') %>");

The application gets hit, but nothing else happens on the client side.

Anyway, I'm not sure I understand correctly all this ajax stuff in Rails.

Isn't it an issue to write js code in edit.js.rjs? Since it is dynamic javascript code, the web browser won't be able to cache it. Am I right?

What's the authoritative way of doing jQuery + Rails3 + Unobstrusive + Clean + etc?

AWDWR doesn't teach good practices in this point of view.

Thanks

2

$("#article_<%= @article.id %>").update("<%= render('admin/articles/form') %>");

My bad this line of code was a mix of Prototype and jQuery, here is the correct line of code which works!

$("#article_<%= @article.id %>").html("<%=render('admin/articles/form') %>");

I think I'm starting to find the light.

3

$("#article_<%= @article.id %>").html("<%= render('admin/articles/form') %>");

Actually this does not work.

But If I do:

$("#article_<%= @article.id %>").html("hello world");

It works as expected. What's wrong?

4

Wow there is some Rails magic going on.

If I replace the code in _form.html.erb by simple "Hellow world", now the div gets correctly updated.

Is Rails filtering, escaping, or preventing a form from updating my div through ajax?

5

As far as I know, RJS outputs Prototypejs code. If you have replaced Prototypejs with jQuery, then the RJS output won’t work (hence the " Element.update is not a

function" error), because Prototypejs isn’t there.

You would probably be better off skipping RJS and just putting straight jQuery into your template, and just name the template edit.js.erb (or .haml, if you were using that)…

Phil

6

You would probably be better off skipping RJS and just putting straight jQuery into your template, and just name the template edit.js.erb

Ok, so I had figured out that right.

But I don't understand why the update of a div works with a dummy string "foo" and does not happen with more stuff such as a form!?

7

This is just a guess: try

$(“#article_<%= @article.id %>”).html(“<%= escape_javascript( render(‘admin/articles/form’) ) %>”);

Phil

8

Phil Crissman wrote in post #981622:

This is just a guess: try

$("#article_<%= @article.id %>").html("<%= escape_javascript( render('admin/articles/form') ) %>");

Phil

YES!!!

Thank you very much Phil!