[Rails3] Confused by RJS vs Unbstrusive jQuery and such

Rails
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

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

5

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!?

6

This is just a guess: try

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

Phil

7

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?

8

Phil C. 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!