How to Render Images in Javascript with Rails 3.1

Question

Rails 3.1 now requires you to use image_tag when rendering an image using the asset pipeline.

I have built endless scroll into my application and have put the code into a js.coffee file. I wish to render a spinning loading gif whilst more products are loaded. I cannot use image_tag here as this file does not support rails code, but I have written it in here so you understand what I am trying to do.

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 1200
        $('.pagination').html("<%= image_tag("loading.gif") %> Loading more...")
        $.getScript(url)
    $(window).scroll()

Previously, I would have just written it in pure HTML, using <img src=... But this will no longer work with the asset pipeline. How can I achieve this?

Zajn · Accepted Answer · 2012-06-21 15:24:14Z

5

Using plain HTML should work just fine.

Try using: <img src="/assets/loading.gif" /> if your loading.gif is inside assets/images.

UPDATED 21/06/2012

As per the Ruby on Rails Guide, Section 2.2.3, changing the file extension of your .js file to filename.js.erb or filename.js.coffee.erb will allow you to use embedded ruby inside your javascript.

You can then use the asset_path helper to access the path where your assets are stored.

edited Jun 21, 2012 at 15:24

answered Jun 20, 2012 at 18:03

Zajn

4,10826 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tob88 Over a year ago

Will this not only work in production if I include the fingerprint part? It would have to be something like <img src="/assets/loading-3ca5380af3c933ae32.gif" />

Zajn Over a year ago

Hmm, good point. I hadn't thought of that, as I was only toying around with something on my dev environment. I'll take a look into it here shortly.

tob88 Over a year ago

I mean I could put the image_tag in a div in the view with display none and then put $('.paginationLoader').show() in the js code. But this just seems unnecessary, and a bit of a work around, there must surely be a better way. Would be interested if you were able to come up with anything, thanks!

Zajn Over a year ago

According to the documentation, you should be able to access the asset_path helper from your coffeescript file. Look here at section 2.2.3.

tob88 Over a year ago

I just tried it and it didn't work initially. I'll try some tweaking when I'm home later, it does look promising. Should at least help know what terms to search for a little better. Thanks a lot.

|

Collectives™ on Stack Overflow

How to Render Images in Javascript with Rails 3.1

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related