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

Question

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

我对AJAX，javascript和客户端脚本编写起来很新。

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

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

根据我的阅读，我需要在回发后手动连接这个。

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

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

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

2）我如何解决这个问题....如何连接它，以便在updatepanel中回发后它仍然有效。

我知道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

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

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

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

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在回发后不起作用

问题描述投票：14回答：9

9个回答

最新问题

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

问题描述 投票：14回答：9

9个回答

最新问题

问题描述投票：14回答：9