jquery datepicker ms ajax updatepanel 在回发后不起作用 [英] jquery datepicker ms ajax updatepanel doesn't work after post back

查看：24
本文介绍了jquery datepicker ms ajax updatepanel 在回发后不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

总的来说，我对 AJAX、javascript 和 sclient 端脚本非常陌生.

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

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

根据我的阅读，我需要在回帖后手动将其连接起来.

1) 我真的不明白为什么.在我的母版页上，我有:

它使用分配的 mydatepickerclass 选择我的输入框.和所有作品.为什么这会停止处理回发.

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

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

编辑

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

<内容模板><%-- 公司历史部分的开始--%><字段集><legend>活动历史</legend><script type="text/javascript">$(函数(){$(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'});});<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"/>

</fieldset></内容模板>

updatepanel 里面的脚本不重新连线吗?

谢谢

乔恩·霍金斯

解决方案

更新面板将重新加载 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="服务器"><title></title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"><script type="text/javascript">$(document).ready(function() {Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);函数 EndRequestHandler(sender, args) {$('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' });}});<身体><form id="form1" runat="server"><div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="UpdatePanel1" runat="server"><内容模板><asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox><br/><asp:Button ID="Button1" runat="server" Text="UpdateMe"onclick="Button1_Click"/></内容模板></asp:UpdatePanel></表单>

So I did some reading of the related questions and had some interesting stuff but did not find my answer, at least did not understand the answer.

I am very new to AJAX, javascript and sclient side scripting in general.

I have been using C# asp.net for a bit and recently added some updatepanels to my side to smooth so of the user controls and bits being updated so that the page was not reloaded each time. All works brilliantly and I was very happy with it till I decided to try and use some JQuery.

I have picked up the datepicker from ui.jquery.js which is cool and works great on a normal page. My problem arrives when I do a postback from within an updatepanel. The datepicker just stops working.

from what I have read I need to manually wire this back up after the post back.

1) I don't really understand why. on my master page I have:

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

which picks up my input boxes with the mydatepickerclass assigned. and all works. Why would this stop working on the postback.

2) How do I fix this.... how do I wire it up so that after a postback in an updatepanel it still works.

I understand that the ID might change on a postback, I think but as I am using classes I don't know what is going wrong.

edit

I have the following code in my usercontrol where the update is happening:

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

Does the script inside the updatepanel not rewire it?

Thanks

Jon Hawkins

解决方案

the update panel is going to reload the contents of the html. You'll have to listen for the UpdatePanel to complete and recreate the datepicker.

Here is a very basic sample. This doesn't take into account multiple update panels on your page or potential memory leaks from not properly destroying your datepicker.

Another thing to note when mixing ASP.NET Ajax and jQuery be careful because the both use the $ in different contexts

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

这篇关于jquery datepicker ms ajax updatepanel 在回发后不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆