CODEWITHSUNDEEP
jqueryasp.netajax
Adnan Bhatti
Adnan Bhatti

Reputation: 3490

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

 <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>
    });

Upvotes: 1

Views: 1471

Answers (3)

Sky
Sky

Reputation: 1

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(); }

Upvotes: 0

Adnan Bhatti
Adnan Bhatti

Reputation: 3490

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>

Upvotes: 0

David
David

Reputation: 219027

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();
});

Upvotes: 2

Related Questions