0

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

James N
  • 523
  • 1
  • 8
  • 30

1 Answers1

0

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

Joel Blum
  • 7,750
  • 10
  • 41
  • 60
  • thanks for the answer. putting the `jquery.tubolinks` above everything else got a `$ is not a function` error, then putting `jquery` above the `jquery-turbolinks` fixed that error, but resulted in the original error still – James N Feb 02 '17 at 19:45
  • are you actually including the timepicker js? I can't see that you do in your question – Joel Blum Feb 02 '17 at 19:53
  • thank you for the suggestion, I can't believe i forgot that! that took away the error, but still a weird "bug" that sometimes i can click on my navbar drop down, but other times i cannot. No error, no nothing. Some pages i can't click on it, some pages i can click on it. Do you know why that could be? – James N Feb 02 '17 at 20:18
  • nvm i think this solved that annoying bug: http://stackoverflow.com/questions/11697789/why-is-my-dropdown-menu-with-bootstrap-not-working – James N Feb 02 '17 at 20:42