Include same js file in multiple html.erb files in Rails

Question

Is a javascript file that is included in one html.erb persistent even in the other view with a different url? For eg: Suppose the flow is if I click on Go button in new then the user is directed to show page and I include js file only in new.html.erb then is the js file also available in show?

new.html.erb

<%= javascript_include_tag 'common' %>

So are the functions in common.js file available in my_domain/show just like how it is available in my_domain/new? Or should I include the js file again in show.html.erb?

Also I would like to know the best way to include same javacript file in partials. For eg as below:

main.html.erb

<% if some_condition %>
  <% render partial: 'first_partial' %>
<% elsif some_other_condition %>
  <% render partial: 'second_partial' %>
<% else %>
  <% render partial: 'first_partial' %>
  <% render partial: 'second_partial' %>
<% end %>

_first_partial.html.erb

#some code
<%= javascript_include_tag 'common' %>

_second_partial.html.erb

#some code
<%= javascript_include_tag 'common' %>

Here in the main for if and elsif condition I render only one of the partials so I can include the js file in any partial but for the third else condition since both the partials are rendered, what is the best way to include the js file? and also I cannot include the js file in main because the js file is called after the html in the partials is rendered.

I edited my answer - why do you think you cannot load it in the main file? — Clara
– Clara, Commented Mar 30, 2020 at 17:45
The main file has other code also. I have only pasted the necessary content for this question. The if conditions in the question are inside another if block. So the js file is unnecessary when the other condition is not satisfied in main file. So I do not include it and also the js only has functions on the html elements in those partials. — Lax_Sam
– Lax_Sam, Commented Mar 30, 2020 at 18:51
Basically what I wanted to ask was if two partials in the same parent html.erb file or a partial inside a partial of the parent html.erb require the same js file then what is the best way to include the js file. My question is not completely clear I guess. — Lax_Sam
– Lax_Sam, Commented Mar 30, 2020 at 18:56
I get the question :) And the answer is, you can put it in the main file, even if that seems a bit weird. But always remember, the partials will just be all merged into a big html file. I will update my answer — Clara
– Clara, Commented Mar 30, 2020 at 19:00
@Clara I have opened another question where I have asked the doubt more clearly - stackoverflow.com/questions/60938008/… Please go through this question also. — Lax_Sam
– Lax_Sam, Commented Mar 30, 2020 at 19:24

Clara · Accepted Answer · 2020-03-30 19:12:14Z

No, normally the javascript code is not available in the other views, just in the one where you include it. So you need to include it again.

The exception would be if you have it in a layout file like application.html.erb because this on is rendered in all views.

If you call the javascript package in both partials anyway, then you can also just call it in main, after the if statement. This will be loaded after the partials have been loaded. It might seem weird, to require a piece javascript in a file that doesn't seem to have the html elements that you are using in the JS file, however, the partials are just a way to organise the code in rails. In the end they will be merged into one big html file.

In the comments you said this if statement is nested into another if statement, so maybe you don't need the javascript at all? Paste it at the end of the if statement like so

<% if outer_if_statment %>
  <% if some_condition %>
    <% render partial: 'first_partial' %>
  <% elsif some_other_condition %>
    <% render partial: 'second_partial' %>
  <% else %>
    <% render partial: 'first_partial' %>
    <% render partial: 'second_partial' %>
  <% end %>
  <%= javascript_include_tag 'common' %>
<% else %>
...
<% end %>

This way it will be available in for all partials but not, if the inner if statement is not chosen.

Another thing: Javascript should be loaded at the end of the html file anyway so that the user doens't have to wait for it to load while he/she doesn't see any html elements. If we put the javascript right in the middle of a hmtl file like this, we're infringing this principle.

Now there is a helper to that: You can define a second yield in your application.html.erb

 <body>
    <%= yield %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>

    <%= yield(:after_js) %>
</body>

In the views, you can call it like this:

<%= content_for :after_js do %>
  <%= javascript_include_tag 'common' %>
<% end %>

This will make sure, that the JS is loaded at the end of the body and that all other JS code is loaded beforehand (if there are any dependencies). And, if you still only want to load it depending on the conditions you could repeat the if statement inside the content_for block.

Depending on what your JS script looks like, you can also make sure it only executes, if the necessary HTML element is found on the page. Let's imagine you want to add an event listener on a button.

// common.js
const button = document.querySelector("#red-button")
if (button) {
  button.addEventListener(...)
}

Thanks for the answer. I have edited my question. Please go through the question. Your answer is correct for the previous version of my question but my edit got uploaded late. So you had already answered for the previous version.

Collectives™ on Stack Overflow

Include same js file in multiple html.erb files in Rails

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related