Solved

JQuery is undefined problem

Posted on 2011-09-08
20
1,643 Views
Last Modified: 2012-05-12
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
Comment
Question by:gaugeta
  • 9
  • 8
  • 3
20 Comments
 
LVL 1

Expert Comment

by:vakorde
ID: 36508010
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
 
LVL 1

Expert Comment

by:vakorde
ID: 36508012

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
 

Author Comment

by:gaugeta
ID: 36508051
@vakorde:I dont see column no 4342 here.
Please help...
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36508057
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
 
LVL 1

Expert Comment

by:vakorde
ID: 36508155
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
 

Author Comment

by:gaugeta
ID: 36508652
@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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36508663
Did you get any error? show link
0
 

Author Comment

by:gaugeta
ID: 36508682
@sonawanekiran:There is no error.I get only an outline of the actual gui the internal parts of it are transparent.
Please help...
0
 

Author Comment

by:gaugeta
ID: 36508691
@sonawanekiran:I am supposed to get the gui as shown in the image.

samp.bmp
0
 

Author Comment

by:gaugeta
ID: 36508700
@sonawanekiran:But ia am getting in this format.
samp2.bmp
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 17

Accepted Solution

by:
sonawanekiran earned 500 total points
ID: 36508743
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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36508752
Problem is with  jquery-ui-1.8.14.custom.css
0
 

Author Comment

by:gaugeta
ID: 36508773
@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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36508959
You need to find out the css within jquery-ui-1.8.14.custom
0
 

Author Comment

by:gaugeta
ID: 36509115
@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
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36509125
I didn't get what you mean. Can you please elaborate on this?
0
 

Author Comment

by:gaugeta
ID: 36509140
@sonawanekiran:I want onlythe textbox in the whole page and no items such a the function appering below the textbox.
Please help...
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36509146
I am cleaning the code.....
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36509198
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
 

Author Comment

by:gaugeta
ID: 36509447
@sonawanekiran:Thanks a lot.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now