title: ASP.net update panel with java script
body: <p>I am aware that this question has been asked before however all of the solutions I have tried don't seem to work.  It could be my lack of knowledge on how Java script actually functions.  After hours scouring the web and watching youtube videos I haven't been able to come up with a solution.  I can get the java script to function properly even with a master page but when I place the textbox and button inside of an update panel it works until the click event is fired and then it drops the script.  Any guidance would be appreciated below is two versions of my code both are giving me the error of daterangepicker is not a function:</p>
  
  <pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" 
  AutoEventWireup="true" CodeFile="datagrid.aspx.cs" 
  Inherits="DynamicDataGrid.datagrid" %&gt;
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"&gt;
   &lt;div id="page-wrapper"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-lg-12"&gt;
             &lt;div  style="padding-top: 10px;"&gt;
  
  &lt;asp:UpdatePanel ID="UpdatePanel1" runat="server"&gt;
  &lt;ContentTemplate&gt;
      &lt;asp:Button ID="Button1" runat="server" CausesValidation="False" OnClick="Button1_Click" Text="Search" Height="100%"/&gt;
      &lt;asp:TextBox ID="txtFrom" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:Label ID="From" runat="server" Text="Label" Visible="False"&gt;&lt;/asp:Label&gt;
      &lt;asp:Label ID="To" runat="server" Text="Label" Visible="False"&gt;&lt;/asp:Label&gt;
  
  &lt;asp:PlaceHolder id="PlaceHolder" runat="server"/&gt;&lt;/br&gt;&lt;/br&gt;
  
                 &lt;asp:Panel ID="Panel1" runat="server" CssClass="Avgsection"&gt;
  
             &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
             &lt;asp:Label ID="Label1" runat="server" Text="Label" 
             Visible="False"&gt;&lt;/asp:Label&gt;
             &lt;asp:Label ID="Label2" runat="server" Text="Label" 
             Visible="False"&gt;&lt;/asp:Label&gt;
  
                 &lt;/asp:Panel&gt;
      &lt;/ContentTemplate&gt;
  &lt;/asp:UpdatePanel&gt;   
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
           &lt;script type="text/javascript"&gt;Sys.Application.add_load(function(){
          $(function () {
             $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
      });
        });
       &lt;/script&gt;
     &lt;script type="text/javascript"&gt;Sys.Application.add_load(function(){
        $(function () {
             $("#&lt;%=txtFrom.ClientID %&gt;").daterangepicker({
                 dateFormat: "yy-mm-dd",
                 changeMonth: true,
                 changeYear: true,
                 chandeDate: true
  
                   });
             });
  
     &lt;/script&gt;
     &lt;script type="text/javascript"&gt;Sys.Application.add_load(function(){
             $(function () {
                   $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" 
    }).val()
                 });
    });
    &lt;/script&gt;
    &lt;/asp:Content&gt;
  </code></pre>
  
  <p>I have also tried this:</p>
  
  <pre><code>           &lt;script type="text/javascript"&gt;Sys.Application.add_load(function () {
  
             $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
  });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;Sys.Application.add_load(function(){
        $(function () {
             $("#&lt;%=txtFrom.ClientID %&gt;").daterangepicker({
                 dateFormat: "yy-mm-dd",
                 changeMonth: true,
                 changeYear: true,
                 chandeDate: true
                   });
   &lt;/script&gt;
   &lt;script type="text/javascript"&gt;Sys.Application.add_load(function(){
  
                   $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()
                 });
  &lt;/script&gt;
  </code></pre>