Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

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

Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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 …
The viewer will learn how to simulate a series of sales calls dependent on a single skill level and learn how to simulate a series of sales calls dependent on two skill levels. Simulating Independent Sales Calls: Enter .75 into cell C2 – “skill leve…
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…

719 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