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

x
?
Solved

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

Posted on 2009-05-18
5
Medium Priority
?
1,951 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 2000 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

User Beware!  This is a rather permanent solution to removing your email from an exchange server.  The only way to truly go back is to have your exchange administrator restore your mailbox from backups.  This is usually the option of last resort.  A…
Deploying a Microsoft Access application in a Citrix environment is not difficult but takes a few steps. However, Citrix system people are often of little help, as they typically know next to nothing about Access. The script provided here will take …
Viewers will learn how to maximize accessibility options in an Excel workbook for users with accessibility issues.
The viewer will learn how to use a discrete random variable to simulate the return on an investment over a period of years, create a Monte Carlo simulation using the discrete random variable, and create a graph to represent the possible returns over…

886 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