small medium large xlarge

12 Sep 2011, 17:05
Alexander Tsepkov (2 posts)

From the issues I’ve been getting and research I did, it seems like JS integration changed in version 3.1. In particular, Rails was not able to detect the JS file at all when named create.js.rjs (I noticed that rjs was not available in list of handlers too, giving me MissingTemplate error).

Renaming it to create.js.erb fixed that issue, and some googling revealed that the JS files are essentially jQuery scripts now in 3.1. So my next attempt was to rewrite the js file from this (as appears in the book):

page.replace_html('cart', render(@cart))

to this (as would make sense if written using jQuery):

$('.cart_title').replaceWith(<%= escape_javascript(render(@cart)) %>);

Now, when adding the book to cart, the server’s response seems to imply that everything should work:

Rendered line_items/_line_item.html.erb (3.8ms)
Rendered carts/_cart.html.erb (5.9ms)
Rendered line_items/create.js.erb (7.6ms)
Completed 200 OK in 159ms (Views: 23.1ms | ActiveRecord: 1.4ms)

However, I’m still not seeing the page update until I hit refresh. Did anyone figure out how to get this working in 3.1 or has other suggestions? I really don’t want to downgrade to 3.0.5 since there must have been a reason for this JS change, and I’d rather learn the new way than stick to the outdated one.


17 Sep 2011, 21:01
Alexander Tsepkov (2 posts)

Hey guys, after some messing around with Rails, I figured out the solution myself. I’ll post it here so those with version 3.1 of Rails can continue through the book. The solution I posted above was almost correct, it needs quotes around <%= %> part to actually work (since render will return the actual html, and jQuery needs it to be a string to actually create an element out of it).

Also, the code as it is written above will simply replace the title (the thing that says “Your Cart”) with new cart data, keeping the old cart table below instead of removing it too. The actual code you want that is equivalent to the replace_html() seen in the book is this:

$('#cart').html("<%= escape_javascript(render(@cart)) %>");

So basically, all you have to do differently from the book to get through the AJAX chapter is to name the file “create.js.erb” instead of create.js.rjs”, and use the code in this post instead of the replace_html() code from the book.

18 Sep 2011, 14:14
Sam Ruby (634 posts)

This is just the first change of several required to use JQuery. You might want to skip ahead to section 26.4 to see the rest.

21 Sep 2011, 01:53
Lenny Sirivong (2 posts)

Section 26.4 uses:

$('#current_item').css({'background-color':'#88ff88'}).animate({'background-color':'#114411'}, 1000);

but it looks like jquery’s @animate@ function does not support animating background-color.

21 Sep 2011, 02:32
Lenny Sirivong (2 posts)

Transitioning colors appears to be a little more complicated in jquery, unless I’m missing something obvious.

I used:

$('#current_item').fadeTo(100, .1).delay(100).fadeTo(500, 1);

to animate a “blink”. Had to fade to .1 so that the element isn’t hidden completely, which would cause the space that it normally takes up to collapse.

Edit: Oop, sorry didn’t refresh before posting. Thanks, Sam. I’ll give that a try.

You must be logged in to comment