Timepicker : Uncaught TypeError: undefined is not a function

Question

I've got some trubble with this plugin : https://github.com/jdewit/bootstrap-timepicker

//= require jquery
//= require jquery_ujs
//= require bootstrap-datepicker/js/bootstrap-datepicker
//= require bootstrap-timepicker/js/bootstrap-timepicker
//= require admin/fileupload
//= require admin/category
//= require admin/cars
//= require admin/restaurants
//= require admin/events
//= require zipcodes

in admin/events.js :

$(document).ready(function(){
  $('.timepicker').timepicker();
});

And I got this error : Uncaught TypeError: undefined is not a function

Can anybody help me ?

EDIT :

Here is what I got with console.log($) :

function ( selector, context ) {
        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
    } VM13723:2
undefined

Yes // require bootstrap-timepicker/js/bootstrap-timepicker is a déclaration of bootstrap-timepicker.js (in RoR) — p0k3, Apr 11 '14 at 12:41
What if you just do `console.log($)` or `console.log(jQuery)` ? — Stphane, Apr 11 '14 at 12:44
Don't write your `$('.timepicker').timepicker();` in `document.ready` function. Simply do it in normal function `$(function() { time-picker-call });` — Ranjith, Apr 11 '14 at 12:49
@f00bar : right. Normally, include all `script` files at `footer` page. But in RoR included at first. May be, the browser search the `time-picker` class when its loaded. — Ranjith, Apr 11 '14 at 12:57
Some of your js files may be plugins addition and might be declared inside a anonymous function such as `(function($){ ... }(jQuery));` but sometimes the semicolon is miss and this will raise the error you are talking about "`Uncaught TypeError: undefined is not a function`" when they get merged together. See [this](http://stackoverflow.com/questions/10429838/uncaught-typeerror-undefined-is-not-a-function-on-loading-jquery-min-js) — Stphane, Apr 11 '14 at 14:03

score 0 · Answer 1 · answered Sep 23 '15 at 17:10

I had this problem and I've solved it:
At the first you have to install jQuery UI by NuGet packege manager.
If you don't have it search about how to add "jQuery UI to ASP.NET MVC "
1- Go to "http://www.sitepoint.com/10-jquery-time-picker-plugins/" and select one of the timepickers.
2- Download the package (right click on js and css files and select "save as link").
3- Drag and drop "(name of timepicker js file).js" in script folder in your project solution explorer.
4- Drag and drop "(name of timepicker css file).css" in script content\themes\base\ folder in your project solution explorer.
5- Go to "BundleConfig" and add (name of timepicker js file).js to your "~/bundles/jqueryui" and ether add (name of timepicker css file).css to "~/Content/themes/base/css"
I hope it work for you

Timepicker : Uncaught TypeError: undefined is not a function

1 Answers1