Solved

jquery datepicker opens on default page but not on the modal page

Posted on 2009-05-18
5
1,937 Views
Last Modified: 2012-05-07
Our application is using jquery modals. On one of the modals I need a datepicker for the textbox.
It displays on the default page but on the modal page it doesn't I am not getting any errors either
Please Help I am new to jquery & modals
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="modal.aspx.cs" Inherits="modals.modal" %>
 
<style type="text/css" media="screen">
        @import url("http://localhost/css/ui/ui.core.css");
        </style>
 
<script type="text/javascript" src="http://localhost/js/jquery/ui/ui.core.js"></script>
<script src="jquery/ui/ui.datepicker.js" type="text/javascript"></script>
 <script type="text/javascript">
   <!-- 
   $(document).ready(function(){
   });
    $(function() {
		$("#datepicker").datepicker();
	});
   -->
   
    </script>
 
 
    
    <a href="http://jquery.com/">jQuery</a>
    <div>
<p style="height: 213px">Date: <input id="datepicker"/></p></div><!-- End demo -->

Open in new window

0
Comment
Question by:mdcadu
5 Comments
 
LVL 5

Expert Comment

by:bored321
ID: 24416140
This should work, you have put }); in the wrong place
Change:
 
<script type="text/javascript">
   <!-- 
   $(document).ready(function(){
   });
    $(function() {
                $("#datepicker").datepicker();
        });
   -->
</script>
 
To:
 
<script type="text/javascript">
   <!-- 
   $(document).ready(function(){
   
    $(function() {
                $("#datepicker").datepicker();
        });
   });
    -->
</script>

Open in new window

0
 
LVL 5

Expert Comment

by:bored321
ID: 24416168
Use this instead:
<script type="text/javascript">
   <!-- 
   $(document).ready(function(){
                $("#datepicker").datepicker();
   });
    -->
</script>

Open in new window

0
 
LVL 12

Expert Comment

by:alien109
ID: 24416524
Is the modal window a jquery modal window, and is it being displayed within the default page? If so, you may have a conflict with duplicate IDs. (if both are using "datepicker")
0
 
LVL 1

Accepted Solution

by:
esambo earned 500 total points
ID: 24416894
You need to change the z-index of the datepicker in the modal window:
#ui-datepicker-div, .ui-datepicker { z-index: 2000; }
as described by http://www.nabble.com/Datepicker-below-Dialog---Problem-solved!!!!!-td23288821s27240.html

BTW, following two lines do the same:
$(document).ready(function(){
 $(function() {

Please give the following demo code a try to see how it works:

<html>
<head>
	<!-- CSS fix based on: http://www.nabble.com/Datepicker-below-Dialog---Problem-solved!!!!!-td23288821s27240.html -->
	<style type="text/css" media="screen">
		@import url("http://jquery-ui.googlecode.com/svn/tags/latest/themes/ui-lightness/ui.all.css");
		@import url("http://jquery-ui.googlecode.com/svn/tags/latest/themes/ui-lightness/ui.core.css");
		#ui-datepicker-div, .ui-datepicker { 
			z-index: 2000; 
		}
	</style>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.core.js"></script>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.resizable.js"></script>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.draggable.js"></script>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.datepicker.js"></script>
	<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/ui.dialog.js"></script>
	<script type="text/javascript">
	<!-- 
		$(function() {
			$("#datepicker_page").datepicker();
			$('#datepicker_modal').datepicker();
			$("#my_dialog").dialog({
				autoOpen: false,
				bgiframe: true,
				width: 550,
				modal: true,
				show: 'blind',
				hide: 'puff'
			});
			$('#lnkModalDialog').click(function () {
				$('#my_dialog').dialog('open');
				return false;
			});
		});
	-->
	</script>
</head> 
<body>
	<a href="http://jquery.com/">jQuery</a>
	<div>
		<p>Name: <input name='name_page'></p>
		<p>Date: <input id="datepicker_page" name='datepicker_page' /></p>
	</div>
	<a href='#' id='lnkModalDialog'>modal dialog</a>
	<div id='my_dialog' title='jQuery UI Modal Dialog'>
		<p>Name: <input name='name_modal'></p>
		<p>Date: <input id='datepicker_modal'/></p>
		<p>
			<div>
				The date picker has by default a lower z-index than the jQuery UI dialog.
			</div>
			<div>
				This can be fixed my adding following CSS code:
			</div>
			<code>
				#ui-datepicker-div, .ui-datepicker { z-index: 2000; }
			</code>
			<div>
				as described in: <br>
				<a href='http://www.nabble.com/Datepicker-below-Dialog---Problem-solved!!!!!-td23288821s27240.html'>http://www.nabble.com/Datepicker-below-Dialog---Problem-solved!!!!!-td23288821s27240.html</a>
			</div>
		</p>
	</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:mdcadu
ID: 24421461
Thank you. All I had add was
#ui-datepicker-div, .ui-datepicker {
                  z-index: 2000;
            }

and it works perfectly. Again Thanks
0

Featured Post

Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

Question has a verified solution.

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

Suggested Solutions

Many companies are making the switch from Microsoft to Google Apps (https://www.google.com/work/apps/business/). Use this article to learn more about what Google Apps has to offer and to help if you’re planning on migrating to Google Apps. It is …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to create two correlated normally distributed random variables in Excel, use a normal distribution to simulate the return on different levels of investment in each of the two funds over a period of ten years, and, create a …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

821 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