Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1742
  • Last Modified:

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
0
gaugeta
Asked:
gaugeta
  • 9
  • 8
  • 3
1 Solution
 
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
 
gaugetaAuthor Commented:
@vakorde:I dont see column no 4342 here.
Please help...
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
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
 
sonawanekiranCommented:
I am cleaning the code.....
0
 
sonawanekiranCommented:
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now