Question

Im new to Jquery and im pretty sure im missing a file which is the problem but im a bit lost which ones i should be using. Here is the head and a bunch of other css and js files as im not sure if maybe there is conflict possibly too.

</head>
<!--Tab menu css and javascript link-->
<script type="text/javascript" src="js/tabcontent.js"></script>
<link href="css/tabcontent1.css" rel="stylesheet" type="text/css" />

<!--left menu gallery slider css and javascript-->
<link rel="stylesheet" type="text/css" href="css/login_panel/css/slide_hm.css" media="screen" />
<script src="css/login_panel/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="css/login_panel/js/slide_hm.js" type="text/javascript"></script>

<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.8.21/themes/ui-lightness/jquery-ui.css" />
<script>document.documentElement.className = "js";</script>
<script src="../vendor/jquery-1.7.2.js"></script>
<script src="../vendor/json2.js"></script>
<script src="../src/jquery.collapse.js"></script>
<script src="../src/jquery.collapse_storage.js"></script>
<script src="../src/jquery.collapse_cookie_storage.js"></script>

<link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script></head>

This is the code i have:

<script type="text/javascript">$(function(){
$('#example1').timepicker();
});
</script>

And this is the input:

<input type="text" name="example1" id="example1" value="" />

But nothing shows up and chrome gives an error:
Uncaught TypeError: Object [object Object] has no method ‘timepicker’

So my question is have i messed up the code or am i missing a file and if so where can i download it to add it.

Answer 1

There appear to be a couple of problems here, of varying importance;

Your first line should probably be head, rather than /head, given that you have another /head at the end of the post.

You’re including at least three versions of jQuery – “css/login_panel/js/jquery-1.3.2.min.js”, “../vendor/jquery-1.7.2.js” and “js/jquery.min.js”. Check which one is the latest version, and include it on the line that’s currently including jquery-1.3.2.min.js. Remove the others.

You should probably include jQuery UI immediately after including jQuery, before including the timepicker library.

It’s been suggested that you should wrap the code that’s calling timepicker in a ready() function, you’re already doing that; $(function() {}) is equivalent to $(document).ready(function() {}).

However you might find it saves you some headaches in the long run to change how you’re doing that slightly, as follows;

jQuery(function($) {
    $('#example1').timepicker();
});

(This is equivalent to what you’re doing, but will work if jQuery’s noConflict feature is enabled)

The reason your code isn’t working seems to be that you’re including the timepicker CSS file (“jquery-ui-timepicker-addon.css”), but you’re not including the timepicker javascript file.