Tushar Saurabh Tushar Saurabh - 3 months ago 8
CoffeeScript Question

Rails - two javascripts files are generated for one controller and hence js function is executing twice

Context I am learning rails and trying to create a simple webpage that has file button and submit button. When user clicks the submit button, the browser should display either "Select one or more files" or should display the size of file selected.

Issue The webpage is alerting the same message twice. For example,if I dont select a file and click submit, I get the alert "Select one or more files" twice.When I used debug, the control traverses through both the javascript that got generated for controller and hence displays message twice.


  1. Why two javascript got generated for same coffeescript for a controller?

  2. How do I stop two files from getting generated?



Additional Details

I have a controller main_page.I wrote a coffeescript for main_page controller. However,When I launched the webpage, I can see two javascript file

<script src="/assets/main_page.js.self-fce0f72385b89610aec7efdb8340722a1a1c99772f861b071c3e56ffff373e96.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/main_page.self-08dee8c4f626e100c3f8d2edde72d6a239b69493ee184c06820641df835a4b8c.js?body=1" data-turbolinks-track="true"></script>


I checked in developer tools, the javascript code in both are same.

The coffeescript code is as below -

@checkFileSize = ->

x = document.getElementById("file_tag")
if 'files' of x
if x.files.length is 0
txt = "Select one or more files."
else
for item in x.files
if 'size' in item
txt += "size: " + file.size + " bytes <br>"
alert txt

$ ->
$("#submit_tag").click (e) ->
e.preventDefault();
checkFileSize()


application.html.erb

<!DOCTYPE html>
<html>
<head>
<title>Learning Rails</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>=
</body>
</html>


Please let me know, if you need additional details.

EDITED
application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require raphael
//= require morris
//= require_tree .


Asset Lib Snapshot -
enter image description here

gen gen
Answer

The //= require_tree . statement in your application.js will take every file in your app/assets/javascript folder and compile it, if required. Since your created two main_page files, you also got them in the output as main_page.js.self-fce0f72385b89610aec7efdb8340722a1a1c99772f861b071c3e56ffff373e96.js and main_page.self-08dee8c4f626e100c3f8d2edde72d6a239b69493ee184c06820641df835a4b8c.js. As you can see the first file starts with main_page.js and corresponds to your main_page.js.js.

Thus, just delete main_page.js.js file. Rails will compile your coffee file for your.

Comments