Solved

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

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

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

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…
Having trouble getting your hands on Dynamics 365 Field Service or Project Service trial? Worry No More!!!
Viewers will learn the different options available in the Backstage view in Excel 2013.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

624 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