Solved

JQuery is undefined problem

Posted on 2011-09-08
20
1,677 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

752 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