We Keep Coding

rails + jquery - errors on every page but it still works (sometimes)

I am working on a rails app. It is a standard app, using server rendered pages, and jquery. I have had a decently hard time wrangling together the jquery and i am not sure why.
I am using jquery for a couple things: a datepicker and a timepicker. That is only used for a form a user can use, and is rendered in a users section where they can create/edit.
The structure of my javascript is right now i am using 1 javascript file called main which is required in my application.js. That is all the JS i am using.
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap.min.js
//= require jquery.raty.min.js
//= require jquery.turbolinks
//= require chosen-jquery
//= require turbolinks
//= require main
//= require_tree .
main.js
$(document).ready(function() {
// users profile stuff
if ($('table.calendar tbody tr td ul').hasClass('active-trip')) {
$('.active-trip').parent().css('background-color', 'orange');
}
$("#trip_start_date").datepicker({
minDate: 1
});
$("#start_date").datepicker({
minDate: 1
});
$("#end_date").datepicker({
minDate: 1
});
// ==========
// js in user's trips
$('#trip_start_time').timepicker();
$('#trip_end_time').timepicker();
// ===========
});
The problem that I am having is I am using a bootstrap navbar, with some JS effects on it (dropdowns). On this one page (a resource called "Gyms", or /gyms) the JS completely breaks and leaves the navbar useless. The error that I am getting is
Uncaught TypeError: $(...).timepicker is not a function
And I notice when I get that error once, it then starts repeating and I get it on every page. But yet, when I go back to the form where i use this code, it works completely fine even with the error?
This might be a turbolinks issue, but I am really not sure. I am using these gems
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
if that helps anything. I have also played around with using the jQuery CDN script rendered in application.html.erb but that doesn't really seem to help or hurt anything and is pretty much neutral. Any help would be much appreciated

Try changing the order of requiring:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
put jquery.tubolinks before all other scripts but right after jquery

Rails 4 - No JavaScript errors but JS not working

I'm trying to learn Ruby on Rails and understand the asset pipeline. I figured a good way to do this would be to create my website in Rails and learn with it. However, upon implementing my JS, it seems to add it to the file, but do nothing with it as the scripts aren't working (or some of them...)
I have just set it up on Heroku as I assume that's the easiest way for you to see the code? https://secret-citadel-76066.herokuapp.com/
I haven't yet called owl carousel so I'm sure that would fix the main sections as they're all owl carousels, but what's not working is the navigation and also a scroll to next section should scroll in, and at the bottom a scroll to top should scroll in.
However, somethings work - such as the scrollbar (nicebar).
Any suggestions?
EDIT:
//= require jquery
//= require jquery_ujs
//= require jquery.easing.1.3
//= require detectmobilebrowser
//= require isotope.pkgd.min
//= require wow.min
//= require waypoints
//= require jquery.counterup.min
//= require jquery.nicescroll.min
//= require gmaps
//= require materialize-sprockets
//= require common
//= require stuart-green
//= require turbolinks
note: I deleted the tree because I want to have more control over what loads when

We have the same issue in our project just like yours.
sometimes our js files not working but no error.
try to remove
//= require turbolinks

Rails turbolinks issues with window.onload

I have rails application with baguetteBox library for image popup effect, but it works properly only after page refresh.
I know that its because of turbolinks so I installed jquery-turbolinks gem but it still doesn't work. //require jquery.turbolinks is in the right spot.
//
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require baguetteBox.min
//= require turbolinks
//= require_tree .
And i have this piece of code in the bottom of show view
<script>
window.onload = function() {
baguetteBox.run('.step_div');
};
</script>
to initialize the script.
Any ideas?

You need to trigger things slightly differently for turbolinks:
var myFunc = function() {
baguetteBox.run('.step_div');
};
$(document).ready(myFunc);
$(document).on('page:load', myFunc); // Classic Turbolinks
$(document).on('turbolinks:load', myFunc); // Turbolinks 5
This way, your function will be called on a standard page ready trigger, and also when turbolinks loads the page into memory without an actual page refresh.
Obviously, you only need to include the turbolinks event trigger for the appropriate version of turbolinks that you're using.
Have a look here for the other events triggered by turbolinks 5: https://github.com/turbolinks/turbolinks#full-list-of-events
For the original turbolinks, the documentation is here:
https://github.com/rails/turbolinks/#events

Foundation 5 Topbar not working consistently in rails 4

I'm using foundation 5 in my rails 4 app. The topbar menu works fine when I send a request. I can hover the items and nested items no problems. Then, I click on one of the items, which has a link_to method associated to it. Sometimes it gives the proper result where my menu still works perfectly, but other times the whole thing freezes. This also makes the back button of the mobile menu disappear. Once I send a new request through the refresh or url, the menu works again.
Rails doesn't see any problem in the log file. My menu works fine outside of rails. I wonder if maybe it has to do with my link_to tag_helpers or the way I have set up foundation in my app?
Here is a quick overview on how the JS is routed for foundation. (The config they suggest on their docs)
views/layouts/application.html.erb:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
</head>
<body>
<%= javascript_include_tag "application" %>
</body>
assets/application.js:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(document).foundation();
Has anybody else encountered this problem? Any good solution other than not using foundation 5 out there?
Thanks
Alex

Foundation has known issues with Turbolinks, your issue may be due to that.
To troubleshoot that, you could disable Turbolinks and see if the top-bar still has issues.
Here's a simple guide: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .
Beyond that, if you must have Turbolinks, and Turbolinks is the issue. You can try adding jquery turbolinks as seen here: https://github.com/kossnocorp/jquery.turbolinks .
If the problem continues to persist, the next step would be to check the order you're importing the javascript files (this matters with these Turbolinks / Foundation issues) and you may be satisfied that way. I do not have an exact order for you to put them in, but if you search for "Turbolinks Foundation" issues you will eventually stumble onto some solutions. This is not necessarily a certain solution, but it'll guide you in the right direction.
Update: Try this order for importing your javascript assets. And, to quote the source:
Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.js
// app/assets/javascript/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos
//= require turbolinks
Note: Look at Alex Aube's answer on this page for additional useful information.

Ok. To go along with what Ecnalyr explained. (Which he explained correctly, and I kind of misunderstood for a little bit). This worked for me:
I kept = javascript_include_tag "application" at the end of the body of application.html.erb
application.js is like this:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .
$(document).foundation();
//= require turbolinks

This works for turbolinks progressbar and foundation tabs, dropdown links, accordion
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
var ready;
ready = function() {
$(document).foundation();
};
$(document).ready(ready);
$(document).on('page:load', ready);

I recently experienced this issue.
Using jquery.turbolinks didn't fix it. Reordering the requires in the application.js didn't fix it.
Nothing mentioned so far here did the trick.
The solution I found was to move the foundation initializer from application.js to within the body. I just put it below my _nav partial.
<script>
$(document).foundation();
</script>

Rails can't include AngularJS

I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.

I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)

After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.

in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work

In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.