Question

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

我对AJAX，javascript和sclient side scripting很新。

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

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

从我所读到的内容中，我需要在回发后手动将其重新连接起来。

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

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

选择分配了mydatepickerclass的输入框。和所有的作品。为什么这会停止回发。

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

我知道ID可能会在回发时发生变化，我认为但是当我使用课程时，我不知道出了什么问题。

修改

我的usercontrol中有以下代码，其中发生了更新：

<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>

updatepanel中的脚本是否重新连接它？

由于

乔恩霍金斯

Answer 1

更新面板将重新加载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>

Answer 2

我知道这已经过时但是......尝试替换：

$(document).ready(function() {

使用：

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

Answer 3

而不是这样做有一个简单的替代方案。

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

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函数

Answer 4

$(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' });
        }
    });

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

Answer 5

＆＃34; jQuery UI Datepicker在ajax部分回发之后无效＆＃34;

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

<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);
}

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

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

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

Answer 6

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();
    });
}

Answer 7

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

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

       <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>

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

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

Answer 8

另一种简便的方法是从“更新面板”中取出日期文本框。这样，“更新面板”所做的回发不会影响日期文本框

Answer 9

我知道这篇文章很旧 - 但只是将你的jquery datepicker放在更新面板之外 - 应该100％工作......

jquery datepicker ms ajax updatepanel在回发后不起作用

9 个答案: