JQuery is undefined problem

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 
		<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,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,li,dl,dt,dd,pre,blockquote,fieldset,label{
				margin:0;
				padding:0;
				border:0;
			}
			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%; }
			
		</style> 
		
		
		<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">
			
			$(function(){
				
		
				$('.example-container > pre').each(function(i){
					eval($(this).text());
				});
			});
			
		</script>
</head> 
	<body> 
		<div class="wrapper">
			
			
			

	
		
				
				
	
<div class="example-container">
		<p>To show numbered grids under the sliders you may use the following options:</p>
		<dl>
			<dt>hourGrid</dt><dd>default=0</dd>
			<dt>minuteGrid</dt><dd>default=0</dd>
			<dt>secondGrid</dt><dd>default=0</dd>
		</dl>
		<p>When using ampm option hours will be displayed with an "a" or "p": 04a, 12p, etc...</p>
		<div>
			<input type="text" name="example10" id="example10" value="" />
		</div>
	
<pre>
$('#example10').timepicker({
	hourGrid: 4,
	minuteGrid: 10
});
</pre>
	</div>
<body>
<html>

Open in new window

jquery-ui-timepicker-addon.js
gaugetaAsked:
Who is Participating?
 
Kiran SonawaneConnect With a Mentor Project LeadCommented:
Use below code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <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" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <link rel="stylesheet" media="all" type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.14.custom.css" />
    <style type="text/css"> 
      body,img,p,h1,h2,h3,h4,h5,h6,form,table,td,ul,li,dl,dt,dd,pre,blockquote,fieldset,label{
        margin:0;
        padding:0;
        border:0;
      }
      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%; }
      
    </style> 
    
    
    <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript">
      
      $(function(){
        
    
        $('.example-container > pre').each(function(i){
          eval($(this).text());
        });
      });
      
    </script>
</head> 
  <body> 
    <div class="wrapper">
      
      
      

  
    
        
        
  
<div class="example-container">
    <p>To show numbered grids under the sliders you may use the following options:</p>
    <dl>
      <dt>hourGrid</dt><dd>default=0</dd>
      <dt>minuteGrid</dt><dd>default=0</dd>
      <dt>secondGrid</dt><dd>default=0</dd>
    </dl>
    <p>When using ampm option hours will be displayed with an "a" or "p": 04a, 12p, etc...</p>
    <div>
      <input type="text" name="example10" id="example10" value="" />
    </div>
  
<pre>
$('#example10').timepicker({
  hourGrid: 4,
  minuteGrid: 10
});
</pre>
  </div>
<body>
<html>

Open in new window

0
 
vakordeCommented:
In the file "jquery-ui-1.8.14.custom.min.js"
There is no definition for object "jQuery". check the column 4342.
you need to add this
<script type="text/javascript" src="jquery.js"></script>

and get the jquery.js file from the jquery library or form internet..
0
 
vakordeCommented:

forgot to mention that you need to add
<script type="text/javascript" src="jquery.js"></script>

in HTML file just before

<script type="text/javascript" src="jquery-ui-1.8.14.custom.min.js"></script>
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
gaugetaAuthor Commented:
@vakorde:I dont see column no 4342 here.
Please help...
0
 
Kiran SonawaneProject LeadCommented:
Just add below line at the top withing head tag (<head>) and done!!!!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

This is latest and stable jquery plung in
0
 
vakordeCommented:
If you open the file "jquery-ui-1.8.14.custom.min.js"
it has a single line of code. in that search for (jQuery) this is the first occurrence of the variable jQuery. Ideally it should be defined properly. It is not defined. This is the actual reason for an error u were facing.
 
the solution offered by "sonawanekiran" is valid and will solve ur problem. In that latest version of JS file you will not face the problem of undefined variable.
0
 
gaugetaAuthor Commented:
@vakorde & @sonawanekiran:Thanks for the reply.
The error is gone now but i'm not getting the date picker properly.
I was trying to simuate the date picker in the example 10 of the following link:
http://trentrichardson.com/examples/timepicker/
Please help...
0
 
Kiran SonawaneProject LeadCommented:
Did you get any error? show link
0
 
gaugetaAuthor Commented:
@sonawanekiran:There is no error.I get only an outline of the actual gui the internal parts of it are transparent.
Please help...
0
 
gaugetaAuthor Commented:
@sonawanekiran:I am supposed to get the gui as shown in the image.

samp.bmp
0
 
gaugetaAuthor Commented:
@sonawanekiran:But ia am getting in this format.
samp2.bmp
0
 
Kiran SonawaneProject LeadCommented:
Problem is with  jquery-ui-1.8.14.custom.css
0
 
gaugetaAuthor Commented:
@sonawanekiran:Thanks a lot it works perfectly.
How do i change the color of the Choose Time header which appers when the textbox is clicked.
Thanks again...
0
 
Kiran SonawaneProject LeadCommented:
You need to find out the css within jquery-ui-1.8.14.custom
0
 
gaugetaAuthor Commented:
@sonawanekiran::How do i have only the textbox in the page without all the other extra gui.
I am not able to isolate the textbox without disturbing its functionality.
0
 
Kiran SonawaneProject LeadCommented:
I didn't get what you mean. Can you please elaborate on this?
0
 
gaugetaAuthor Commented:
@sonawanekiran:I want onlythe textbox in the whole page and no items such a the function appering below the textbox.
Please help...
0
 
Kiran SonawaneProject LeadCommented:
I am cleaning the code.....
0
 
Kiran SonawaneProject LeadCommented:
Check below code.
Please open new question next time :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <link rel="stylesheet" media="all" type="text/css" href="http://trentrichardson.com/examples/timepicker/css/ui-lightness/jquery-ui-1.8.14.custom.css" />
    <style type="text/css"> 
      #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%; }
    </style> 
    <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript" src="http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $('#example10').timepicker({
        hourGrid: 4,
        minuteGrid: 10
      });
    });
    </script>
</head> 
  <body> 
   <input type="text" name="example10" id="example10" value="" />
  <body>
<html>

Open in new window

0
 
gaugetaAuthor Commented:
@sonawanekiran:Thanks a lot.
0
All Courses

From novice to tech pro — start learning today.