Why does not Datepicker work?
All,
I have this page,
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="priceLists.aspx.cs" Inherits="PriceWorx.priceLists" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xh开发者_运维技巧tml">
<head runat="server">
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs({ collapsible: true });
$("#tabs").tabs({ event: "mouseover" });
$('#datepicker').datepicker({
minDate: "0",
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- all tabs -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<!-- tab definitions -->
<ul>
<li><a href="#tabs-1" class="dynamic">foo</a></li>
<li><a href="#tabs-2">bar</a></li>
</ul>
<div id="tabs-1" style="width: 100%;">
<div>
<p>
Date:
<input type="text" id="datepicker" /></p>
</div>
</div>
<div id="tabs-2">
<table style="width: 100%;">
<tr valign="top" align="center">
<td style="width: 100%;" colspan="4">
bar
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
The Tabing works fine , but not the Datepicker
The current version of jQuery UI is 1.8.9. Just change this line:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js" type="text/javascript"></script>
Working here: http://jsfiddle.net/9XC67/
Not enough info to know why this is broken. I can walk you though how i would debug this..
- open firebug console. are there any errors?
- using firebug look at the bottom of the body tag and see if the datapicker hidden div exists there.
- if the div exists, using firebug set display to block from hidden. do you see the datepicker? switch to different tabs and try this process.
- it could be that the datepicker is behind something, hide all the tabs in firebug and make the datepicker visible
You have a problem with this line in your head. Remove it and it seems to work.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css" />
You're pulling the wrong css. Change it to be 1.8.0 theme and it'll work.
Or you can change the javascript reference as Shane pointed out.
加载中,请稍侯......
精彩评论