Solved

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

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

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 …
Article by: Leon
Software Metering within our group of companies has always been an afterthought until auditing of software and licensing became a pain point. Orchestrator and SCCM metering gave us the answer and it was an exciting process.
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 …

911 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now