How to move script in a view to a separate js file in Ruby On Rails?

Question

I am using: Ruby version: 2.2 Rails version: 4.2

I am attempting to make use of the asset pipeline in terms of JavaScript, I understand and have working stylesheets, but I cannot separate my js from my view.

Example:

// view.html.erb 
<body> 
  <div id="slider"></div> 
</body> 


// assets/javascript/slider.js
$( "#slider" ).slider({
  min: 0,
  max: 10000,
  value: 0,
  slide: function( event, ui ) {
    $( "#SolarAmount" ).val(ui.value + " sq. ft.");
  }
});

But the slider is nowhere to be found. However, If I include the function inside the view.html.erb it works as expected. If anyone can offer some advice about how the pipeline works with javascript I would appreciate the help!

It appears that no .js files that I include in the assets/javascipt/ directory are being utilized, not just this one. Do I need to add them to be precompiled or something? — Kyle Brown
– Kyle Brown, Commented Mar 13, 2015 at 1:33

Christian · Accepted Answer · 2015-03-13 02:02:51Z

1

Generally speaking, you should nearly always enclose that type of code in the jQuery ready function. If the javascript is at the top of the document, it will execute before the div exists.

The jQuery ready function executes code when the DOM is fully loaded. 99% of the time, this is what you'll want.

For example, you need to do this:

$(function() {
  $( "#slider" ).slider({
    min: 0,
    max: 10000,
    value: 0,
    slide: function( event, ui ) {
      $( "#SolarAmount" ).val(ui.value + " sq. ft.");
    }
  });
});

Make sure you're including the application javascript file in your template, as Mario suggests. Assuming you're using the jquery-rails gem, your application.js should look something like this:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

As in, you need to make sure you include jQuery before all the other js files in the directory (require_tree .).

edited Mar 13, 2015 at 2:02

answered Mar 13, 2015 at 1:35

Christian

19.8k3 gold badges57 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kyle Brown Over a year ago

Oh okay, that explains why the slider only appears if I put the script at the bottom of the view. If I move the above to its own slider.js will I be able to reference it with the div like my example above?

Christian Over a year ago

Absolutely. If it still doesn't work, you need to make sure you're including the javascript files in your template properly (Mario's answer covers this), and jQuery needs to be included first. Also, check your console for errors.

Kyle Brown Over a year ago

yes my application.html.erb is as Mario said and my application.js file looks like above. If I use the js you gave me as it is it should work fine right? Like I do not need anything else format wise?

Christian Over a year ago

Where is the slider library located? Perhaps your slider.js file is being being included before your slider library is loaded. You might need to manually require your slider library before require_tree. As I mentioned, you need to check your console (as in web browser console) for errors.

Kyle Brown Over a year ago

ActionController::RoutingError (No route matches [GET] "/dist/js/bootstrap.min.js"): ActionController::RoutingError (No route matches [GET] "/assets/js/ie10-viewport-bug-workaround.js"): So I think you are right, I think it's an issue with loading the library, let me try a few things.

Mario · Accepted Answer · 2015-03-13 02:19:47Z

0

Make sure you're importing your application.js file in your app/views/layout/application.html.erb file.

It should have this line: <%= javascript_include_tag "application", "data-turbolinks-track" => true %>

Also make sure your app/assets/javascripts/application.js file is properly set up (most likely is)

edited Mar 13, 2015 at 2:19

answered Mar 13, 2015 at 1:33

Mario

1,35911 silver badges16 bronze badges

6 Comments

Kyle Brown Over a year ago

The above line is in my application.html.er and I followed the other comments advice about the .ready() function but still no luck! It is as if it's not using any of the js files in the asset folder.

Mario Over a year ago

just to make certain, since you wrote the path on your main question... are you saving the javascript files to a folder named app/assets/javascripts, or javascript? It should be plural

Kyle Brown Over a year ago

the full path of the js is app/assets/javascripts/silder.js

Mario Over a year ago

could you try creating another file, say test.js, and just adding an alert to it? $( function() { alert("if you see this, the pipeline works"); } ); and restarting the server?

Kyle Brown Over a year ago

Yes! That means the pipeline is at least working lol could it be the way I referenced the slider in the view? I just made a div for it per API instructions.

|

staxim · Accepted Answer · 2019-06-14 19:55:46Z

0

If you're fighting with turbolinks, you may need to put your js code inside a turbolinks ready function.

Something like this:

$(document).on("turbolinks:load", function(){
  $( "#slider" ).slider({
    min: 0,
    max: 10000,
    value: 0,
    slide: function( event, ui ) {
      $( "#SolarAmount" ).val(ui.value + " sq. ft.");
    }
  });
});

You'll know if you're fighting with turbolinks when you see your js working when you refresh the page but not when you navigate from another page in your app.

answered Jun 14, 2019 at 19:55

staxim

1,49715 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to move script in a view to a separate js file in Ruby On Rails?

3 Answers 3

5 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related