Solved

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

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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

The System Center Operations Manager 2012, known as SCOM, is a part of the Microsoft system center product that provides the user with infrastructure monitoring and application performance monitoring. SCOM monitors:   Windows or UNIX/LinuxNetwo…
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 use the =DISCRINV command to create a discrete random variable, use this command to model a set of probabilities and outcomes in a Monte Carlo simulation, and learn how to find the standard deviation of a set of probabil…
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…

705 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

20 Experts available now in Live!

Get 1:1 Help Now