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

发布于 2024-07-13 10:44:25 字数 2031 浏览 5 评论 0原文

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

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

我已经使用 C# asp.net 有一段时间了，最近在我这边添加了一些更新面板，以平滑用户控件和位的更新，以便页面不会每次都重新加载。一切都很顺利，我对此非常满意，直到我决定尝试使用一些 JQuery。

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

根据我所读到的内容，我需要在回发后手动连接此备份。

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>

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咆哮 2024-07-20 10:44:25

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

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>

回复收藏 0 原文

初心 2024-07-20 10:44:25

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

$(document).ready(function() {

为：

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

回复收藏 0 原文

浅蓝的眸勾画不出的柔情 2024-07-20 10:44:25

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

你可以这样做。在这种情况下它总是有效;))

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

You can do like this. in this case it will work always ;))

回复收藏 0 原文

三五鸿雁 2024-07-20 10:44:25

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

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

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

Instead of doing this there is a simple alternative.

In the postback of the element in update panel add this code

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

And this in javascript

function getjquerydate() {

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

}

After Partial postback in updated panel it again call the datepicker function

回复收藏 0 原文

迷乱花海 2024-07-20 10:44:25

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

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

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

现在将日期选择器控件与文本框绑定。

<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 中工作。请参阅下面的代码。

<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

"jQuery UI Datepicker does not work after ajax partial postback"

Place a script manager and an update panel on the page.

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

Now place a text box and a button inside the updatepanel control.

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

Now bind the datepicker control with the text box.

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

Now create a server side click for the button which will cause an ajax partial postback.

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

On running the page, u would see something like this

Click on datepicker. The datepicker gets opened and selected date becomes value of the text box.
Now click on button. The server side button click gets called and now you will see something like this.

The datepicker button is gone.So what do we do now to make it working within ajax. See below code.

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

pageLoad() function is available in JavaScript if you are using ASP.NET ajax. AJAX framework automatically wires up any client-side function named pageLoad() as an Application.Load handler

Source Link Credits

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

回复收藏 0 原文

云胡 2024-07-20 10:44:25

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

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

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

I know this is an old post, but I just encounter this issue and found the answer in this thread. Hope it can help any one who encounter this.

I did not put any client side script in the code behind. I only put this code:

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

The code above need to be inside the body section and not the head section. I tried putting it before and after the script manager, or inside and outside of the UpdatePanel and found no issue with all options. So as long as this code is in the body section, it work for me.

Just make sure you change your defined datetimepicker class. For mine is "default-date-picker" in the js file.

回复收藏 0 原文

夜空下最亮的亮点 2024-07-20 10:44:25

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

When use asp:ScriptManager and Sys.WebForms.PageRequestManager does not working, you can try to use following code:

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

回复收藏 0 原文