Question

遇到JQuery calender plugin的问题，在单击该按钮以打开编辑项模板后，如果再次启动回发，则无法加载该问题。

日历控件位于UpdatePanel，ContentTemplate，ListView和EditItemTemplate中。

下面是我编写的一些sudo-esq代码，用于演示代码的结构。

如果有人有任何理论或答案，为什么以下示例中的日期不加载日历jQuery，直到调用DDL autopostback，这将是一个很大的帮助。

进一步澄清，原始代码片段中没有明确的说明，SelectedItem中有一个命令按钮，用于打开所选的EditItem，其中有问题的日历功能在回发之前不起作用。页面的这一部分在开始时没有加载，因为它已经崩溃了。

提前谢谢。

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent">
<script src="/Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="/Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="/Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
      $(function () {
         $("#Date").dynDateTime({
             showsTime: true,
             ifFormat: "%Y/%m/%d %H:%M",
             daFormat: "%l;%M %p, %e %m, %Y",`enter code here`
             align: "BR",
             electric: false,
             singleClick: false,
             displayArea: ".siblings('.dtcDisplayArea')",
             button: ".next()"
         });
         $("#Date2").dynDateTime({
             showsTime: true,
             ifFormat: "%Y/%m/%d %H:%M",
             daFormat: "%l;%M %p, %e %m, %Y",
             align: "BR",
             electric: false,
             singleClick: false,
             displayArea: ".siblings('.dtcDisplayArea')",
             button: ".next()"
         });
      });
<asp:UpdatePanel>
<ContentTemplate>
<asp:ListView>
<EditItemTemplate>
    <asp:TextBox ID="Date"/>
    <asp: DropDownList ID="DDL" AutoPostBack="True">
        <asp:ListItem Value="0"> Option 1 </asp:ListItem>
        <asp:ListView Value="1"> Option 2 </asp:ListItem>
    </asp:DropDownList>
</EditItemTemplate>
<InsertItemTemplate>
    <asp:TextBox ID="Date2"/>
    <asp: DropDownList ID="DDL2" AutoPostBack="True">
        <asp:ListItem Value="0"> Option 1 </asp:ListItem>
        <asp:ListView Value="1"> Option 2 </asp:ListItem>
    </asp:DropDownList>
</InsertItemTemplate>
<ItemTemplate>
</ItemTemplate>
<SelectedItemTemplate>
     <asp:Button ID="btn1" CommandName="OpenEdit"/>
</SelectedItemTemplate>
</asp:ListView>
</ContentTemplate>
</UpdatePanel>
</Content>

Answer 1

试试这个，这将解决问题。将以下代码段放在脚本块中：

  $(function () {
     $("#Date").dynDateTime({
         showsTime: true,
         ifFormat: "%Y/%m/%d %H:%M",
         daFormat: "%l;%M %p, %e %m, %Y",`enter code here`
         align: "BR",
         electric: false,
         singleClick: false,
         displayArea: ".siblings('.dtcDisplayArea')",
         button: ".next()"
     });
     $("#Date2").dynDateTime({
         showsTime: true,
         ifFormat: "%Y/%m/%d %H:%M",
         daFormat: "%l;%M %p, %e %m, %Y",
         align: "BR",
         electric: false,
         singleClick: false,
         displayArea: ".siblings('.dtcDisplayArea')",
         button: ".next()"
     });
  });

  var prm = Sys.WebForms.PageRequestManager.getInstance();

  prm.add_endRequest(function() {
   // re-bind your jQuery events here
   $("#Date").dynDateTime({
        showsTime: true,
        ifFormat: "%Y/%m/%d %H:%M",
        daFormat: "%l;%M %p, %e %m, %Y",`enter code here`
        align: "BR",
        electric: false,
        singleClick: false,
        displayArea: ".siblings('.dtcDisplayArea')",
        button: ".next()"
   });
   $("#Date2").dynDateTime({
        showsTime: true,
        ifFormat: "%Y/%m/%d %H:%M",
        daFormat: "%l;%M %p, %e %m, %Y",
        align: "BR",
        electric: false,
        singleClick: false,
        displayArea: ".siblings('.dtcDisplayArea')",
        button: ".next()"
    });
  });

以上是带有Update面板的jQuery代码的解析。他们需要在回发后重新初始化。

如果您认为这是解决方案，请将此标记为答案。：）

JQUERY日历直到第二次回发才开始工作

1 个答案: