How To load js only in one page of my app

Question

I'm trying to load a js file into a single page of my app. But it is called in all and this ends up generating errors on my screen.

My application.js is:

//= require jquery
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

My application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Netshow</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>
    <div class='cover-container d-flex w-100 h-100 p-3 mx-auto flex-column'>
      <header class='masthead mb-auto'>
        <%= render 'shared/navbar' %>
      </header>
      <%= yield %>
      <footer class='mastfoot mt-auto'>
        <%= render 'shared/footer' %>
      </footer>
    </div>
  </body>
</html>

My js file is:

$(document).on("turbolinks:load", function() {
  console.log('teste')
  var player = videojs('my_video_1');

  var options = {};

  player.on('play', function() {
    $.ajax({
      type: 'POST',
      url:"/video_clicks/",
      dataType: 'json',
      data: {
        video_click: { video_id: window.location.pathname.split('/')[2] }
      },
      success: function(){
        $('span.video-count')[0].innerText = parseInt($('span.video-count')[0].innerText) + 1
      }
    });
  });

  function showCount(){
    var id = window.location.pathname.split('/')[2] 
    $.ajax({
      type: 'GET',
      url:"/video_clicks/"+id,
      dataType: 'json',
      success: function(data){
        console.log($('span.video-count')[0])
        $('span.video-count')[0].innerText = data
      }
    });
  }

  showCount()
});

I would like to load the js file only on one page of my app and not at all. How can I do this? I have already tried removing the require_tree add content in application.html.erb and set the content in my html file, but the rails speaks that I have to add the file in assets.erb for precompilation and when I do this the other pages reload my js file.

Possible duplicate of [Best way to execute js only on specific page](https://stackoverflow.com/questions/9578348/best-way-to-execute-js-only-on-specific-page) — hanoldaa, Feb 10 '19 at 05:29

Emu · Answer 1 · 2019-02-10T05:32:34.693

You have multiple options in that scenario:

You can check the params[:controller] and params[:action] in application.html.erb, if that matches the specific page controller+action then only load the JS. (Better Solution)

Like:

<% if params[:controller] == 'your_controller_name' && params[:action] == 'your_action_name' %>
  <%= render partial: 'shared/custom_js' %>
<% end %>

Based on this code above, I'll create a new file named custom_js.html.erb in my views > shared folder. Then write the script in that file inside <script></script> tag. Also, you need to remove that script file from application.js file.

You can create a different layout for that specific page access method. Like the answer here.

hum...how i can check the params controller and action in application.html.erb? — denispolicarpocampos, Feb 10 '19 at 05:27

score 0 · Answer 2 · answered Feb 10 '19 at 05:34

0

You just simply include that page (erb file) with <%= javascript_include_tag 'js_file_name' %>

answered Feb 10 '19 at 05:34

Linh Nguyen

925
1
10
23

score 0 · Answer 3 · answered Feb 10 '19 at 06:04

0

Add to you view and

<%= javascript_include_tag 'js_file_name' %>

config/initializers/assets.rb

Rails.application.config.assets.precompile += %w(js_file_name.js)

answered Feb 10 '19 at 06:04

praaveen V R

1,259
1
11
20

How To load js only in one page of my app

3 Answers3