troubleshooting Question

JQuery is undefined problem

Avatar of gaugeta
gaugeta asked on
Web Languages and StandardsJavaScriptHTML
20 Comments1 Solution1832 ViewsLast Modified:
Hi Experts...
I have a html page using a time picker.The problem is i am getting an error known as jQuery is undefined.
The code and the javascripts are attached.
Please help... jquery-ui-1.8.14.custom.min.js jquery-ui-1.8.14.custom.min.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">  
<html lang="en" xmlns=""> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Adding a Timepicker to jQuery UI Datepicker</title> 
		<meta name="Description" content="jQuery Timepicker Addon.  Add a timepicker to your jQuery UI Datepicker.  With options to show only time, format time, and much more." />
		<meta name="Keywords" content="jQuery, UI, datepicker, timepicker, datetime, time, format" />
		<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.14.custom.css" />
		<style type="text/css"> 
			body{ background-color: #363531; border-top: solid 4px #C60; font: 90% Arial, Helvetica, sans-serif; padding: 20px; }
			h1,h2{ margin: 10px 0; }
			p{ margin: 10px 0; }
			pre{ padding: 20px; background-color: #ffffcc; border: solid 1px #fff; }
			.wrapper{ background-color: #ffffff; width: 800px; border: solid 1px #eeeeee; padding: 20px; margin: 0 auto; }
			.example-container{ background-color: #f4f4f4; border-bottom: solid 2px #777777; margin: 0 0 40px 0; padding: 20px; }
			.example-container p{ font-weight: bold; }
			.example-container dt{ font-weight: bold; height: 20px; }
			.example-container dd{ margin: -20px 0 10px 100px; border-bottom: solid 1px #fff; }
			.example-container input{ width: 150px; }
			.clear{ clear: both; }
			#ui-datepicker-div{ font-size: 80%; }
			/* css for timepicker */
			.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
			.ui-timepicker-div dl{ text-align: left; }
			.ui-timepicker-div dl dt{ height: 25px; }
			.ui-timepicker-div dl dd{ margin: -25px 10px 10px 65px; }
			.ui-timepicker-div td { font-size: 90%; }
		<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
		<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
		<script type="text/javascript">
				$('.example-container > pre').each(function(i){
		<div class="wrapper">

<div class="example-container">
		<p>To show numbered grids under the sliders you may use the following options:</p>
		<p>When using ampm option hours will be displayed with an "a" or "p": 04a, 12p, etc...</p>
			<input type="text" name="example10" id="example10" value="" />
	hourGrid: 4,
	minuteGrid: 10
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 20 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 20 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros