DatePicker is not firing in the textbox when I make it visible inside AJAX UpdatePanel

Question

 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
            <p runat="server">
            <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :"   Height="21px" 
                Width="136px" Visible="False"></asp:Label>
            <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" 
                Visible="False" ViewStateMode="Enabled"></asp:TextBox>
        </p>
         </ContentTemplate>
       </asp:UpdatePanel>

This above textbox is not visible when the page is initially loaded. I make it visible when user clicks on some other drop down list and make some selection. The textbox shows up but the Jquery datepicker I have with it does not fire, because the textbox is made visible using AJAX UpdatePanel its HTML doesn't get added to the page.

Any guidance how to fix it?

I am pasting Jquery below.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"
    type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function ($) {
        //$("#occurrence_dateTextBox").mask("99/99/9999");
        $("#<%= txtDOA.ClientID %>").datepicker();
        //$(".datepicker").datepicker(); 
 </script>
    });

then you'll need to add the datepicker when you add the input, not on document ready. Post the js you use to load the input and we might be able to help. — Sinetheta, Nov 10 '11 at 01:30
This seems to address your concern. You need to initialize the date picker after the update panel is updated. http://stackoverflow.com/questions/1190549/how-can-i-run-some-javascript-after-an-update-panel-refreshes — enduro, Nov 10 '11 at 01:33

score 2 · Answer 1 · answered Nov 10 '11 at 01:35

If the HTML element isn't part of the DOM when that jQuery code is executed then this would indeed be the case. What you probably want to do is bind the jQuery code to the element after it is added to the DOM. Take a look at jQuery's live() function. It basically watches for elements being added to the DOM and applies the binding to them.

Since the date picker binding is happening inside of the plugin, you also need to do one extra thing to make this work. The normal line of code for the date picker doesn't have a live() syntax. However, what you essentially want to do is run the plugin as soon as the newly added element has focus. (After all, the date picker isn't particularly useful until the element is focused.) So you'll want to use live() to bind to the "focus" event. Something like this:

$('#<%= txtDOA.ClientID %>').live('focus', function() {
  $(this).datepicker();
});

Its seems like Live is deprecated and I should use delegate or on as follows, $(document).delegate('#<%= txtDOA.ClientID %>','focus', function () { $(this).datepicker(); }); However I still have to figure out first part. — Adnan Bhatti, Nov 10 '11 at 01:59

score 0 · Answer 2 · answered May 12 '16 at 15:44

You can also rebind the datepicker after your async postbacks. the function pageLoad is automatically called by .NET Update Panels, and this will allow you to hide and show multiple times, not just once.

function pageLoad(){ $("#<%= txtDOA.ClientID %>").datepicker(); }

score 0 · Accepted Answer · answered Nov 10 '11 at 02:24

Found and easier workaround.

If wrap textbox in the panel and set Panel to visible=false on form load and then change it to visible=true on Ajax partial postback Jquery works fine the textbox.

Here is my workaround in the code above.

<asp:Panel ID="Panel1" runat="server" Visible="false">
            <p>
                <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :" Height="21px" Width="136px"
                    Visible="true"></asp:Label>
                <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" Visible="true"
                    ViewStateMode="Enabled"></asp:TextBox>
            </p>
        </asp:Panel>

DatePicker is not firing in the textbox when I make it visible inside AJAX UpdatePanel

3 Answers3