发表新帖
发表新帖

jquery datepicker ms ajax updatepanel doesn't work after post back

后端 未结
关注
9 1653
囚心锁ツ
囚心锁ツ 2020-12-05 05:42

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 AJ

相关标签:
9条回答
  • 你的背包
    2020-12-05 06:13

    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 讨论(0)
  • 庸人自扰
    2020-12-05 06:23

    "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 讨论(0)
  • 心在旅途
    2020-12-05 06:27

    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 讨论(0)
 看不清?
提交回复
热议问题