1

Rails 4, Ruby 2, jQuery 1.11

My app has tables built using DataTables. I am using jQuery to modify those table's HTML. I'm trying to add an image which is in assets/images but I cannot seem to determine the path necessary to access it. Since I am editing the HTML after it has been preprocessed, it is native HTML and I cannot use Rails variables within it.

I can get Rails to recognize the image is there, or more specifically RubyMine. Since I am in JavaScript, the path "../images" can access the image. But, this doesn't work for HTML.

My question is, given that an image is in app/assets/images, what path to I have to specify for native HTML to be able to access that image?

$('input[type=search]').each(function () {
    var $this = $(this);
    $this.addClass("theSearch");
    $('.theSearch')
        .append('<img id="clrImg" class="clrSearch" src="../images/DeleteRed.png" />');
...

FWIW, this is going to be a button that clears a search field when clicked. Right now, it is working using an "X" but that is just ugly....

I should note that I have tried many permutations of /app/assets/images/...

Richard_G
  • 4,700
  • 3
  • 42
  • 78

2 Answers2

0

Figured it out...

Assets aren't only preprocessed, they are uglified and installed in public. I copied it to public/assets/images and am able to access it as assets/images/DeleteRed.png.

Thanks...

UPDATE: This works only in some cases. As I work through the app, I find that the URI changes. An absolute URI works throughout, though it has some issues:

http://myprefix.mydomain.com/assets/images/DeleteRed.png

For instance, this will fail as myprefix or mydomain changes such as when I push it to the production environment. It'd better to test system variables and build the path for test, development, production, etc.

Richard_G
  • 4,700
  • 3
  • 42
  • 78
0

If your javascript file is stored in app/assets/javascripts with a .js.erb extension, you can insert Ruby code just like you would in an HTML view:

$('input[type=search]').each(function () {
  // ...
  $('.theSearch')
    .append('<img id="clrImg" class="clrSearch" src="<%= image_path('DeleteRed.png') %>" />');
  // ...
});

The js file will be automatically pre-processed by the asset pipeline, and the image_path Rails helper will ensure that the path is always correct (if your image is stored in app/assets/images, that is — no need to move it to public!).

Tiago
  • 365
  • 1
  • 8
  • Well, that sounds good. But, it didn't work for me at all. I renamed the file to filename.js.erb. I added in the variables. They were never processed and they ended up in the running script exactly as I entered them. Any clue as to why that would be? Thanks. – Richard_G Jan 06 '15 at 02:13
  • The preprocessing is enabled by default on Rails 4, so maybe there is a config issue in your app. Is there any related warning or error in your log/development.log? Can you try without any asset in public/? Can you post the config.assets.* settings in your config/ files? – Tiago Jan 07 '15 at 11:36
  • Here is a related question, if that may help: http://stackoverflow.com/questions/18005115/why-are-js-files-in-my-rails-asset-pipeline-not-being-compiled – Tiago Jan 07 '15 at 11:38