rails 4 - javascript files need to be called twice in order to work

Question

I have the following javascript include tag in my application.html.erb file:

<%= javascript_include_tag "application", "data-turbolinks-track" => true %>

This outputs the following to the browser:

<link data-turbolinks-track="true" href="/assets/chosen.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/colorbox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/conversations.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/employer_profile.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/employer_profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/footer.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/freelancer_profile.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/header.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jobs.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.c2selectbox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.jscrollpane.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/popup.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/profiles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/relationships.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/schedules.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/conversations.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/dynamic_forms.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/employer_profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/functions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jobs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery-1.8.3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.c2selectbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.carouFredSel-6.2.0-packed.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.checkbox.radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.colorbox-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.jscrollpane.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.mousewheel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/profiles.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/relationships.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/schedules.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/lib/abstract-chosen.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/lib/select-parser.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/chosen.jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/chosen-jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cocoon.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

For some reason, some of the javascript in the browser (for example, the drop down menu) won't work unless I also separately include javascript files that the original javascript_include_tag already outputs. For example, the javascript won't work unless in addition to that original javascript_include_tag, i also put:

<%= javascript_include_tag "jquery-1.8.3.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.checkbox.radio.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.mousewheel.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.jscrollpane.min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.carouFredSel-6.2.0-packed.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.c2selectbox.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "modernizr.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "jquery.colorbox-min.js", "data-turbolinks-track" => true %>
<%= javascript_include_tag "functions.js", "data-turbolinks-track" => true %>

which outputs:

<script data-turbolinks-track="true" src="/assets/jquery-1.8.3.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.checkbox.radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.mousewheel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.jscrollpane.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.carouFredSel-6.2.0-packed.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.c2selectbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/modernizr.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.colorbox-min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/functions.js?body=1"></script>

So I don't understand why the javascript files need to be included twice. I'm almost sure this is incorrect and they should only be included once, but I can't get the js to work then. How Do i fix this?

NOTE - There is a lot of javascript so I don't know exactly where, for example, the drop down is located, but i know the javascript itself works. I am almost certain the problem has to do with how the js files are being called.

Answer 1

In the first include you aren't including jQuery until after you include jQuery UI which is probably helping to render the menu. Once you load the files a second time then the dependencies are available...

Try including your JavaScript in the order it is needed, jQuery has no dependencies whereas jQuery UI depends on jQuery, so make sure to include jQuery before jQuery UI, and do the same for any other JavaScript files with dependencies, make sure to include them after the file they depend on.

Or you may be including 2 different versions of jQuery each time: I see jquery.js and jquery-1.8.3.min.js in each list. jquery-1.8.3.min.js comes after jQuery UI, which seems bad to me.

Answer 2

Include gem 'turbolinks'
then change the application.js as

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-1.8.3.min
//= require_tree .

and in layout include this <%= javascript_include_tag "application" %>

you have to try these steps,no need to call javascript files in layout otherthen application.js