How do I dynamically update html in Rails and use helpers?

Question

I would like to update the html of a div using jQuery in Rails. And I want to use helpers.

For instance, let's say I am trying to put an image in the div. Here is what I am doing in js file:

// Update the html content of #div
// I am using a helper, img_tag

$("#div").html("<%= img_tag('some_image.png') %><br> + 'some message'"

But the helper does not create img tag. Instead, it is displayed in the div as a string.

i.e.
// Content of the div as a result:

<%= img_tag('some_image.png') %><br> some message

When I manually type the html tag, it works.

i.e.
$("#div").html("<img src="assets/images/some_image.png" alt="img"><br>
 + 'some message'"

But I want to know how I can use helpers in this case, because I am also trying to use other helpers such as link_to.

Answer 1

Several issues to consider:

---

JS

Firstly, you need to consider the JS that you're trying to use.

By definition, standard JS cannot use rails helpers . Reason is that JS is a "front-end" / "client-side" language, which will only work after a page has loaded. Indeed, JS tends to only work with the "DOM" (Document Object Model) :

JavaScript (JS; English pronunciation: /'jɑvəˌskrɪpt/) is a dynamic computer programming language. It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. It is also being used in server-side network programming (with Node.js), game development and the creation of desktop and mobile applications.

The bottom line is that Javascript will only load up on the client-side part of your application . Since Ruby / Rails is server side, equivocal to the likes of PHP, your JS will therefore not be able to process the Rails helpers in the traditional flow you have.

The only way to get around this is to combine your JS with Rails' loading mechanisms somehow. This can either be done with ajax (to pull from the server), or render your js with Rails (not sure how)

---

Fix

I believe that you can use preprocessing with Rails JS , which means that, like erb , you'll be able to call Rails helpers within your javascript files:

The same applies to a JavaScript file - app/assets/javascripts/projects.js.coffee.erb is processed as ERB, then CoffeeScript, and served as JavaScript.

Keep in mind the order of these preprocessors is important. For example, if you called your JavaScript file app/assets/javascripts/projects.js.erb.coffee then it would be processed with the CoffeeScript interpreter first, which wouldn't understand ERB and therefore you would run into problems.

This means that if you wanted to do what you're doing, you'll need to append preprocessors to ensure it can call the Rails helpers:

#app/assets/javascripts/application.js.erb
var loaded = function(){
   $("#div").html("<%=j image_tag('some_image.png') %><br> + 'some message'"
};
$(document).on("page:load ready", loaded);

Answer 2

您的JavaScript文件必须具有.erb扩展名才能使用嵌入式ruby。