Solved

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

Posted on 2009-05-18
5
1,935 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular - code works but need to make a change 14 32
JQuery JavaScripot loop though RadioButtonList 4 25
Scroll 5 news at a time. 4 27
Jquery 2 12
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to simulate a series of coin tosses with the rand() function and learn how to make these “tosses” depend on a predetermined probability. Flipping Coins in Excel: Enter =RAND() into cell A2: Recalculate the random variable…
The view will learn how to download and install SIMTOOLS and FORMLIST into Excel, how to use SIMTOOLS to generate a Monte Carlo simulation of 30 sales calls, and how to calculate the conditional probability based on the results of the Monte Carlo …

777 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