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

Answer 1

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

Answer 2

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

Answer 3

In script manager please use your jquery script.

so it will load the script file on every async postback