jQuery not working after postback RSS

• • Reply
  

  duckkiller53

  Member

  165 Points

  209 Posts

  jQuery not working after postback

  Jan 31, 2013 01:25 AM|LINK

  Could someone please help:
  
       I am very new to jQuery and I have come upon my first problem using the language.  I have a page that contains an asp.net checkbox and Panel, the panel contains a textbox that I use with the datepicker widget.   The datepicker is awesome but I need to toggle the display of the Panel depending on the state of the checkbox.
  
  I came across a jQuery function that works great to accomplish this requirement but after postback the function no longer works.  Note:  all my controls are within a ASP updatepanel.  Also, I am using this line of code in my C# code behind if there's a postback.   "cal.Visible = chkByDate.Checked;".

  Thanks Dave

  
  Here is my code:
  
   <script type="text/javascript">
  
          $(function () {
              $('#<%= txtFromDate.ClientID %>').datepicker();
  
              // Hide/Display div when user checks or unchecks checkbox.
              $('#<%= chkByDate.ClientID %>').click(function(e) {
                  var $divToHide = $('#<%= cal.ClientID %>');
                  if (this.checked) $divToHide.show('fast');
                  else $divToHide.hide('fast');
              });
  
          });       
  
   </script>
  
  protected void Page_Load(object sender, EventArgs e)
   {
         if (!Page.IsPostBack)
         {
            LoadCustomers();
            LoadSalesReps();
            LoadProdCats();
            LoadWarehouse();
           chkByDate.Checked = true;
         }
  
         cal.Visible = chkByDate.Checked;
             
   }   
  
  

  <asp:CheckBox ID="chkByDate" runat="server"/> 

  <asp:Panel id="cal" runat="server">
         Date: &nbsp
         <asp:TextBox ID="txtFromDate" runat="server"></asp:TextBox>
   </asp:Panel>

  Duckkiller53
  
  Duckkiller53@gmail.com
• • Reply
  

  pro.shailend...

  Participant

  1000 Points

  189 Posts

  Re: jQuery not working after postback

  Jan 31, 2013 03:51 AM|LINK

  Put your script code with in pageLoad() method not with in $(document).ready() function since update panel partially updated the page but the code with in document.ready function will not updated. For more help refer the link:

  http://www.dotnet-tricks.com/Tutorial/aspnet/D719120612-Difference-between-document.ready-and-window.onload-or-pageLoad.html

  .Net Professional & Cosultant
  Blog: Dot Net Tricks Windows Apps
  Please "Mark As Answer" if my suggestions helps you
• • Reply
  

  Jugg3rNaut

  Member

  474 Points

  109 Posts

  Re: jQuery not working after postback

  Jan 31, 2013 05:54 AM|LINK

  put your jquery code in this function which also cares for Post back

  function pageLoad()

  {

  $('#<%= txtFromDate.ClientID %>').datepicker();
  
              // Hide/Display div when user checks or unchecks checkbox.
              $('#<%= chkByDate.ClientID %>').click(function(e) {
                  var $divToHide = $('#<%= cal.ClientID %>');
                  if (this.checked) $divToHide.show('fast');
                  else $divToHide.hide('fast');
              });

  }

  Beware of bugs in the above code; I have only proved it correct, not tried it.
  -------------------------------------------------------
  Contact-Info:Adils.kiet@gmail.com
  
• • Reply
  

  duckkiller53

  Member

  165 Points

  209 Posts

  Re: jQuery not working after postback

  Jan 31, 2013 04:05 PM|LINK

  Thanks for the great link and the information.  That totally explains what's is happening.  The only other thing that I added to my code is this.  I noticed that when the page posted back after clicking a button on the page, that the Panel and calander would reapear after a partial postback.  I added the following to handle it.  Would you say that this is a good way of doing this.  Note: It does work well.

   function pageLoad() {
  
       $('#<%= txtFromDate.ClientID %>').datepicker();
  
       // Hide/Display div when user checks or unchecks checkbox.
       $('#<%= chkByDate.ClientID %>').click(function(e) {
       var $divToHide = $('#<%= cal.ClientID %>');
       if (this.checked) $divToHide.show('fast');
       else $divToHide.hide('fast');
       });
  
       // Added to hide the panel if checkbox is unchecked after partial page postback.
       if ($('#<%= chkByDate.ClientID %>').is(':checked')) $('#<%= cal.ClientID %>').css('display', 'block');
       else $('#<%= cal.ClientID %>').css('display','none');
   }

  Thanks  Dave.

  Duckkiller53
  
  Duckkiller53@gmail.com
  • Marked as answer by duckkiller53 on Feb 05, 2013 07:53 PM