jQuery DatePicker не работает с Masterpage

0

Это следующий вопрос из ASP.NET с jQuery DatePicker

Я попытался использовать jQuery UI DatePicker, как предлагается на этой странице: http://www.aspsnippets.com/Articles/jQuery-UI-DatePicker-Calendar-Example-in-ASPNet.aspx

Когда я тестировал коды в SINGLE webform форме SINGLE webform, он работает как шарм.

Однако, когда я пытался включить их с Masterpage и Contentpage, я не могу заставить календарь работать снова.

Это то, что я пытался сделать до сих пор:

В Masterpage я добавил script scr и link в Head:

<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<%--added below--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

</head>

Вот часть моих кодов на Contentpage

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test2._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    $(function () {
        $("[id$=txtDate]").datepicker({
            showOn: 'button',
        });
    });
</script>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true" Width="250px"></asp:TextBox>

Что именно я пропустил?

Теги:
datepicker

1 ответ

2

Когда вы используете мастер-страницы, каждый элемент управления, указанный с помощью runat="server", на самом деле не имеет идентификатора, который вы ему назначили. Вы можете увидеть его ID, если вы просматриваете сгенерированный источник страницы.

Чтобы получить фактический идентификатор, попробуйте сделать следующее:

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= txtDate.ClientID %>").datepicker({
            showOn: 'button',
        });
    });
</script>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true" Width="250px"></asp:TextBox>

Если вы используете UpdatePanels и вы видите, что ваш элемент управления получает unbound, замените $(document).ready(function(){... }); с function pageLoad() {... }.

Убедитесь, что JavaScript также находится в конце вашего тега content/body. Это обеспечит загрузку последней после всех элементов управления страницей.

Так что это должно быть что-то вроде

    // all my page content ...
    <script type="text/javascript">
        //sweet JS
    </script>
</asp:Content>
Поделиться
  • 0
    Теперь он забрал ID, но календарь все еще не работает (т.е. вообще не видит календарь)
  • 0
    РЕДАКТИРОВАТЬ: Derped. Посмотрите на мой отредактированный ответ.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню