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

Question

提问by Jon

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.

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

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.

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

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

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:

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

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

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

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

2) 我如何解决这个问题.... 我如何连接它，以便在更新面板中回发后它仍然有效。

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.

我知道 ID 可能会在回发时更改，我想但是当我使用类时，我不知道出了什么问题。

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?

updatepanel 中的脚本不会重新连接它吗？

Thanks

谢谢

Jon Hawkins

乔恩·霍金斯

Answer 1

采纳答案by bendewey

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.

更新面板将重新加载 html 的内容。您必须监听 UpdatePanel 以完成并重新创建日期选择器。

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

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

回答by Mike

I know this post is old - but just place your jquery datepicker outside of the update panel - should work 100%...

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

Answer 3

回答by Daniel Tilly

I know this is old but ... try replace:

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

$(document).ready(function() {

with:

和：

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

Answer 4

回答by Shreyas Maratha

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

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

在更新面板中的部分回发后，它再次调用 datepicker 函数

Answer 5

回答by Guven Sezgin Kurt

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

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

Answer 6

回答by Tony Dong

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

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

Answer 7

回答by Koo SengSeng

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.

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

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

只要确保您更改了定义的 datetimepicker 类。我的是js文件中的“默认日期选择器”。

Answer 8

回答by Krishna

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

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

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.

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

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.

现在为按钮创建一个服务器端单击，这将导致 ajax 部分回发。

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.

日期选择器按钮不见了。那么我们现在该怎么做才能让它在 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>

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

如果您使用的是 ASP.NET ajax，则 JavaScript 中可以使用 pageLoad() 函数。AJAX 框架会自动连接任何名为 pageLoad() 的客户端函数作为 Application.Load 处理程序

Source Link Credits

源链接学分

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

Answer 9

回答by cristi_green

Another easy way is to take out the date text box from the Update Panel. This way, the post back made by the Update Panel does not affect the date text box

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

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

提问by Jon

采纳答案by bendewey

回答by Mike

回答by Daniel Tilly

回答by Shreyas Maratha

回答by Guven Sezgin Kurt

回答by Tony Dong

回答by Koo SengSeng

回答by Krishna

回答by cristi_green

相关推荐

最近更新

标签

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

提问by Jon

采纳答案by bendewey

回答by Mike

回答by Daniel Tilly

回答by Shreyas Maratha

回答by Guven Sezgin Kurt

回答by Tony Dong

回答by Koo SengSeng

回答by Krishna

回答by cristi_green

相关推荐

C# 如何获得*互联网* IP？

如何动态更改 C# 组合框或文本框中的自动完成条目？

C#：在不定义新类的情况下创建抽象类的实例

如何将 C# 转换为 DLL 以隐藏源代码？

相关推荐

最近更新

标签

C# 如何获得互联网 IP？