14

所以我做了一些相关问题的阅读并且有一些有趣的东西但没有找到我的答案，至少没有理解答案。

一般来说，我对 AJAX、javascript 和 sclient 端脚本非常陌生。

我一直在使用 C# asp.net 并且最近在我身边添加了一些更新面板以平滑用户控件和位正在更新，以便每次都不会重新加载页面。所有的工作都非常出色，我对此非常满意，直到我决定尝试使用一些 JQuery。

我从 ui.jquery.js 中选择了 datepicker，它很酷，在普通页面上效果很好。当我从更新面板中进行回发时，我的问题就出现了。日期选择器只是停止工作。

从我读过的内容来看，我需要在回帖后手动连接这个备份。

1）我真的不明白为什么。在我的母版页上，我有：

<script type="text/javascript">
    $(function() {
        $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
    });
</script>

它使用分配的 mydatepickerclass 拾取我的输入框。和所有的作品。为什么这会停止在回发上工作。

2）我该如何解决这个问题....我如何连接它以便在更新面板中回发后它仍然可以工作。

我知道 ID 可能会在回发时更改，但我认为，但由于我正在使用类，我不知道出了什么问题。

编辑

我在进行更新的用户控件中有以下代码：

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server">
<ContentTemplate>
    <%-- Start of Company History section --%>
    <fieldset>
        <legend>Activity History</legend>

           <script type="text/javascript">
              $(function() {
              $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});
              });
           </script>            

        <div>
            <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" />
            <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" />
            <label>Date To:</label><input class="mydatepickerclass" type="text" />
            <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" />
            <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" />
        </div>


    </fieldset>
</ContentTemplate>

更新面板中的脚本不会重新连接它吗？

谢谢

乔恩·霍金斯

4

9 回答 9

43

更新面板将重新加载 html 的内容。您必须收听 UpdatePanel 才能完成并重新创建日期选择器。

这是一个非常基本的示例。这没有考虑到页面上的多个更新面板或未正确销毁日期选择器导致的潜在内存泄漏。

混合 ASP.NET Ajax 和 jQuery 时要注意的另一件事是要小心，因为两者都在不同的上下文中使用 $

<!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/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function EndRequestHandler(sender, args) {
                $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
            }

        });
    </script>   
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox>
            <br />
            <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
                onclick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
于 2009-02-06T15:20:25.040 回答
9

我知道这很旧，但是...尝试替换：

$(document).ready(function() {

和：

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

于 2012-04-24T15:17:33.620 回答
6

除了这样做，还有一个简单的替代方案。

在更新面板中元素的回发中添加此代码

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();",   True)

这在javascript中

function getjquerydate() {

$(".datepicker").datepicker({
    numberOfMonths: 2,
    showButtonPanel: true,
    minDate: 1,
    dateFormat: 'dd/mm/yy',
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true
});

}

在更新的面板中进行部分回发后，它再次调用 datepicker 函数

于 2013-05-21T07:00:09.893 回答
6 
$(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack();
        function EndRequestHandler(sender, args) {
            $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });
        }
    });

你可以这样做。在这种情况下，它将始终有效；））

于 2013-07-02T21:55:22.720 回答
1

“在 ajax 部分回发后，jQuery UI Datepicker 不起作用”

在页面上放置一个脚本管理器和一个更新面板。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
 </ContentTemplate>
</asp:UpdatePanel>

现在在 updatepanel 控件中放置一个文本框和一个按钮。

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
     <div style="font-family: Arial; font-size: small;">
        Select Date :
        <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">           
        </asp:TextBox>
     </div>
     <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack"  
       OnClick="btnAjax_Click" />
  </ContentTemplate>
</asp:UpdatePanel>

现在将 datepicker 控件与文本框绑定。

<script type="text/javascript" language="javascript">
$(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
}); 
<script>

现在为将导致 ajax 部分回发的按钮创建服务器端单击。

protected void btnAjax_Click(object sender, EventArgs e)
{
   System.Threading.Thread.Sleep(1000);
}

在运行页面时，您会看到类似这样的内容

阿贾克斯回传

点击日期选择器。日期选择器被打开，选定的日期成为文本框的值。现在点击按钮。服务器端按钮单击被调用，现在您将看到类似这样的内容。

AJAX 回传2

datepicker 按钮不见了。那么我们现在该怎么做才能使其在 ajax 中工作。请参见下面的代码。

<script type="text/javascript" language="javascript">
function pageLoad(sender, args)
{
  $(document).ready(function(){     
    $("#<%=txtDate.ClientID %>").datepicker(
    {   changeMonth:true,
        changeYear:true,
        showOn: 'button',
        buttonText:'Show Date',
        showAnim: 'fadeIn',
        showButtonPanel: true,
        dateFormat: 'DD, MM d, yy',
        buttonImage: 'Images/imgCalendar.png',
        buttonImageOnly: true
     }
   );
   $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
   });
  }); 
}
</script>

如果您使用的是 ASP.NET ajax，则在 JavaScript 中可以使用 pageLoad() 函数。AJAX 框架自动将任何名为 pageLoad() 的客户端函数连接为 Application.Load 处理程序

源链接学分

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

于 2016-12-30T19:00:33.773 回答
0

当使用 asp:ScriptManager 和 Sys.WebForms.PageRequestManager 不起作用时，您可以尝试使用以下代码：

Sys.Application.add_load(LoadHandler);

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() {
    $(document).ready(function () {
        $(".datepicker").datepicker({
            dateFormat: "M d, yy",
            changeMonth: true,
            changeYear: true,
            onSelect: function (dateText, ubst) { 
               //your code here... 
            }
        }).val();
    });
}
于 2014-06-17T17:10:19.133 回答
0

我知道这是一篇旧帖子，但我刚刚遇到这个问题并在这个帖子中找到了答案。希望它可以帮助任何遇到这种情况的人。

我没有在后面的代码中放置任何客户端脚本。我只放了这段代码：

       <script type="text/javascript">       
         Sys.WebForms.PageRequestManager.getInstance().add_pageL
              Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

              function EndRequestHandler() {
                  $('.default-date-picker').datepicker({
                      format: 'dd-mm-yyyy'
                  });
              }

             });
             </script>

上面的代码需要在正文部分而不是头部部分。我尝试将它放在脚本管理器之前和之后，或者在 UpdatePanel 内部和外部，但发现所有选项都没有问题。所以只要这段代码在正文部分，它就对我有用。

只需确保更改定义的 datetimepicker 类即可。我的是 js 文件中的“default-date-picker”。

于 2015-07-31T03:07:19.630 回答
-1

另一种简单的方法是从更新面板中取出日期文本框。这样，更新面板的回帖不会影响日期文本框

于 2019-03-06T12:29:06.337 回答
-2

我知道这篇文章很旧 - 但只需将您的 jquery datepicker 放在更新面板之外 - 应该可以 100% 工作......

于 2012-02-28T10:19:15.847 回答