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

Posted 2023-04-13

技术标签:

【中文标题】jquery datepicker ms ajax updatepanel在回发后不起作用【英文标题】：jquery datepicker ms ajax updatepanel doesn't work after post back 【发布时间】：2010-10-05 23:01:37 【问题描述】：

所以我看了一些相关的问题，有一些有趣的东西，但没有找到我的答案，至少没有看懂答案。

总的来说，我对 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>

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

谢谢

乔恩·霍金斯

【问题讨论】：

【参考方案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>

【讨论】：

添加了一个示例。它正在连接你。它符合您的建议。谢谢..不是很明白，将不得不研究你所提供的但谢谢:) 有人知道如何将它移植到 MVC 中吗？ @programad 您不需要将其移植到 MVC，因为 MVC 没有 UpdatePanel。简单的解决方案，为我工作！感谢您的帖子。【参考方案2】：

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

$(document).ready(function()

与：

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

【讨论】：

非常感谢。你节省了我的时间【参考方案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 函数

【讨论】：

【参考方案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' );
        
    );

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

【讨论】：

【参考方案5】：

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

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

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="upd1" runat="server">
 <ContentTemplate>
 </ContentTemplate>
</asp: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，则

pageLoad() 函数在 JavaScript 中可用。 AJAX 框架自动将任何名为 pageLoad() 的客户端函数连接为 Application.Load 处理程序

来源链接学分

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

【讨论】：

【参考方案6】：

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

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

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

【讨论】：

【参考方案7】：

当使用 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();
    );

【讨论】：

【参考方案8】：

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

【讨论】：

【参考方案9】：

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

【讨论】：

这是真的！但 OP 有要求。

以上是关于jquery datepicker ms ajax updatepanel在回发后不起作用的主要内容，如果未能解决你的问题，请参考以下文章

jQuery ajax 提交表单并从 datepicker、按钮获取值

当我在 ajax 中传递 jquery datepicker 日期时，php 发现索引错误

在 jQuery UI datepicker 中仅选择特定日期（日期列表来自 AJAX）

如何激活由 ajax datepicker 事件生成的选项卡小部件内返回的 jquery 对话框？

jQuery UI DatePicker 没有出现在通过 Ajax 加载的 Bootbox 模式中

使用 datepicker jquery ajax php 更新 mysql 数据库字段