jquery datepicker ms ajax updatepanel doesn't

Question

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

Answer 1

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 2

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

Answer 3

$(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 4

"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

Answer 5

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

Answer 6

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>