Question

195

Why is rails not rendering the .js.erb file?

rated 0 times [ 199] [ 4] / answers: 1 / hits: 19966 / 11 Years ago, thu, october 24, 2013, 12:00:00

I have a rails application where I am trying to have jQuery render WITH an HTML file. The point of this is that the jQuery is specific to the page so I don't want it loading for every page by putting it in the header. Here's what I have done to the files

messages_controller.rb

 # GET /messages/new

 def new

    @message = Message.new

    @users = User.where('id != ' + current_user.id.to_s)

    #if @message.save

       #MessageMailer.new_message(@message).deliver



    respond_to do |format|

       format.html # new.html.erb

       format.js

    end

    #end

 end

/messages/new.html.erb

<div class=row>

    <div class=large-12 columns>

        <div class=panel>

            <h1>New message</h1>

            <%= render 'form' %>



            <%= link_to 'Back', messages_path, :class => button small %>

        </div>

    </div>

</div>

/messages/new.js.erb

$(h1).html('hello'); //for testing that it works

Is there something that I have to add to another file? Is there a request I have to make so it loads both the HTML and .js?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hakeemabramh

Add To Favorites

Follow

Total Points: 234

Total Questions: 109

Total Answers: 109

Location: Romania

Member since Mon, Jun 6, 2022

2 Years ago

hakeemabramh questions

1 Next.js - How to add a < link> tag inside the < head> with literal onload attribute string value?

Tue, Sep 29, 20, 00:00, 4 Years ago

1 How to put content over/on top of particle.js

Tue, Sep 1, 20, 00:00, 4 Years ago

1 How to update user in Strapi

Mon, Jun 29, 20, 00:00, 4 Years ago

1 Does Vuelidate support typescript in VueJs?

Mon, Jan 13, 20, 00:00, 4 Years ago

1 Vue.js equivalent of appendChild to dynamically add new element/component?

Sun, Jan 12, 20, 00:00, 4 Years ago

View All

answered 11 Years ago trayvon · Accepted Answer

Why this won't work?

I don't think your method is a particularly standard way to accomplish what you want. The reason why your JS template is not being loaded is because your controller is setup to respond with an HTML template, if the browser requests HTML, and a JS template, if the browser requests JS. It will never return both because the browser can only request one or the other.

In other words, the respond_to block in your controller is instructing the controller how to respond to requests for different types of content, not listing all of the types of content that will be sent, on every request.

Solution 1: Load the JS on every page

There are a couple of things to consider here. Firstly, just because JS is not used on a particular page, is not, in itself, a good reason not to load it. Rails, via Sprockets, will concatenate and minify all of your JS into a single file. As long as this file does not change, then it will be cached by a user's browser. This will result in a faster response when your user visits a page that does require this JS, as it won't need to make an extra request in order to get the new JS.

If you are concerned about your JS running on content that it shouldn't, then you should really be guarding against this by adding a unique identifier to the page, or pages, on which you want it to run, then detecting that identifier in your JS. For example:

$(h1.special).html('hello');

Solution 2: Use content_for

However, there are some circumstances in which it might be beneficial to load JS separately. The best way to accomplish that, in my opinion, is to have a content for block that appends content to your head, if an individual view needs it.

So in your application layout:

#layouts/application.html.erb

<head>

  #Other head content here



  <% if content_for?(:head) %>

    <%= yield(:head) %>

  <% end %>



  #Other head content here

</head>



#messages/new.html.erb

<% content_for :head do $>

  <%= javascript_include_tag messages_new.js %>

<% end %>

#Other view stuff here



#assets/messages_new.js

$(h1).html('hello');

messages_new.js will then only included, and therefore run, on views where you include that content_for block. It should not appear on any other page.

Solution 3: Just include the javascript in your html

Alternatively, if you don't care if the JS is loaded last, then you can just add the include helper at the bottom of the new.html.erb:

#messages/new.html.erb

#Other view stuff here

<%= javascript_include_tag messages_new.js %>