none
jQuery Calander Problem with update panel and master page

    Question

  • I have used this code to call a calendar in text box

    <link href="Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
        <script src="Scripts/jquery-1.7.1rc1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>

     <script type="text/javascript">
         $(document).ready(function () {
                  $('.dtp').datepicker();
               });

    </script>

    Which is in master page and call function in child page.

     

    I have used a update panel in child page. I have a grid view in update panel if click employee code in grid view select event the coresponding data bind into some label from data base.

    My problem is that First time when I click text box it shows calendar but when data bound by clicking grid view that time the calandar does not shows.

     

    If I refresh page again it shows calandar again.

     

    please help me.

    Main

     


    Faruq
    Wednesday, January 18, 2012 6:22 AM

All replies

  • Hi Faruq,

     

    Welcome to the MSDN forum.

    I guess it’s not the JQuery’s issue, because it works at the second time.

    So I would suggest you to post it at AJAX Controls category for more efficient responses, where experts live in.

                    ASP.NET AJAX + Ajax Control Toolkit : The Official Microsoft ASP.NET Forums

    Thanks for your understanding and support.


    Best Regards,
    Rocky Yue[MSFT]
    MSDN Community Support | Feedback to us
    Thursday, January 19, 2012 6:16 AM
  • Hi Main

    The issue you are seeing is obvious. You are binding the ready event of the document. This event is only fired once the page is loaded and the datepicker is not rebound on ajax events because the document is not loaded again.

    Simply add

    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        function EndRequestHandler(sender, args) {
            if (args.get_error() == undefined) {
                $('.dtp').datepicker();
           }
        }
    </script>

    where you register a callback after the ajax upadte and bind the datpickers again

     

    Nik

    Friday, February 03, 2012 2:42 PM
  • In script manager please use your jquery script.

    so it will load the script file on every async postback

    Friday, February 03, 2012 5:52 PM