0

我在更新面板中有网格视图，在网格视图中有多行带有文本框，我以这样的方式排列代码，当我单击链接按钮时，网格视图的行会增加，但问题是当我想将 jquery datepicker 应用于 txtDate 文本框，它适用于第一行文本框，但是当我单击链接按钮时，网格视图中的行增加时，日期选择器功能不起作用..这是我的代码..

    <script type="text/javascript">

    $(document).ready(function () {

        $("[id$=txtDate]").datepicker();
    });
    </script>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
          <asp:ScriptReference Path="~/Scripts/jquery-2.0.3.js" />
          <asp:ScriptReference Path="~/Scripts/jquery-ui-1.10.3.js" />
      </Scripts>
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
        <ContentTemplate>
       <asp:gridview ID="Gridview1" runat="server" ShowFooter="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
         <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
          <asp:TemplateField HeaderText="First Name">
          <ItemTemplate>
          <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
          </ItemTemplate>
            </asp:TemplateField>
          <asp:TemplateField HeaderText="Last Name">
           <ItemTemplate>
              <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                </ItemTemplate>
           </asp:TemplateField>
            <asp:TemplateField HeaderText="Date">
            <ItemTemplate>
          <asp:TextBox ID="txtDate" runat="server" AutoPostBack="true">

          </asp:TextBox>

           </ItemTemplate></asp:TemplateField>
          </Columns>

        </asp:gridview>
              <asp:LinkButton ID="lnkMore" runat="server" Text="More(>>)" OnClick="lnkMore_Click"></asp:LinkButton>
            &nbsp;&nbsp;
               <asp:LinkButton ID="lnkLess" runat="server" Text="Less(<<)" OnClick="lnkLess_Click"></asp:LinkButton>
             </ContentTemplate></asp:UpdatePanel>

请帮助我..

4

3 回答 3

4

这是解决方案..

   <script type="text/javascript">
    $(function () {
        $('.date').datepicker();
    });
     </script>  

     <asp:ScriptManager ID="scm1" runat="server">

    </asp:ScriptManager>        
       <script type="text/javascript">
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(getme);
        function getme() {
        $('.date').datepicker();
     }
    </script>  

 <asp:UpdatePanel ID="up1" runat="server">

<ContentTemplate>
     <asp:gridview ID="Gridview1" runat="server" ShowFooter="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" >

     <Columns>
    <asp:TemplateField HeaderText="Date">
    <ItemTemplate>
     <asp:TextBox ID="txtDate" runat="server"  class="date"  ></asp:TextBox>                  
      </ItemTemplate>
     </asp:TemplateField>
       </ContentTemplate></asp:UpdatePanel>
于 2013-10-19T06:38:24.023 回答
1

我喜欢这个问题。它的更新面板的问题。只需添加以下代码。

</asp:ScriptManager>

<script type="text/javascript">
              Sys.WebForms.PageRequestManager.getInstance().add_endRequest(getme);
              function getme() {
                  $("[id$=txtDate]").datepicker();
              }
    </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
        <ContentTemplate>

我希望这能解决你的问题。否则请回复。

于 2013-10-17T15:10:40.520 回答
0

使用类选择器而不是 ID 选择器，因为 ID 必须用于 UNIQUE 元素。

它看起来像：

    <script type="text/javascript">

    $(document).ready(function () {

        $(".datepick").datepicker();
    });
    </script>
     <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
          <asp:ScriptReference Path="~/Scripts/jquery-2.0.3.js" />
          <asp:ScriptReference Path="~/Scripts/jquery-ui-1.10.3.js" />
      </Scripts>
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
        <ContentTemplate>
       <asp:gridview ID="Gridview1" runat="server" ShowFooter="True" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3">
         <Columns>
        <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
          <asp:TemplateField HeaderText="First Name">
          <ItemTemplate>
          <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
          </ItemTemplate>
            </asp:TemplateField>
          <asp:TemplateField HeaderText="Last Name">
           <ItemTemplate>
              <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
                </ItemTemplate>
           </asp:TemplateField>
            <asp:TemplateField HeaderText="Date">
            <ItemTemplate>
          <asp:TextBox ID="txtDate" class='datepick' runat="server" AutoPostBack="true">

          </asp:TextBox>

           </ItemTemplate></asp:TemplateField>
          </Columns>

        </asp:gridview>
              <asp:LinkButton ID="lnkMore" runat="server" Text="More(>>)" OnClick="lnkMore_Click"></asp:LinkButton>
            &nbsp;&nbsp;
               <asp:LinkButton ID="lnkLess" runat="server" Text="Less(<<)" OnClick="lnkLess_Click"></asp:LinkButton>
             </ContentTemplate></asp:UpdatePanel>

注意<asp:TextBox ID="txtDate" class='datepick' runat="server" AutoPostBack="true">

编辑

因为您必须实例化与此问题中的其他主题文本字段一样多的日期选择器

$(document).ready(function () {
    $(".datepick").each(function() {
       $(this).datepicker();
    });
});
于 2013-10-17T13:28:47.643 回答