with jquery and update panel

  • nightimedweller
  • Newbie
  • Newbie
  • nightimedweller
  • Posts: 7

Post 3+ Months Ago

ive been having a problem loading my jquery functions after the update panel asynch's i currently have a div with another div inside of a table holding information from a database im using jquery to collapse the tables so the user can edit the information in sections and more easy. currently after i hit the edit controls or save it does an asynch which messes up the jquery it causes the table you not selecting to open and close 2x the button clicke times. i tried putting it in a pageLoad function in javascript but same thing happens. im pretty sure its because i have update panel's on each table and they update seperately and when you click another table its adding the document.ready function and the pageLoad on top of eachother. if anyone has suggestions or another way to go about this without updatepanels it would be very much appreciated. also if you have any questions let me know

Code: [ Select ]
<div class="header">
  <a class="collapse">[-]</a>
  <a>Customer Information</a>
  <div class="button">
  <asp:Button ID="btnCustomer_Edit" runat="server" text="Edit" />
  <asp:Button ID="btnCustomer_Save" runat="server" Text="Save" />
  <asp:Button ID="btnCustomer_Update" runat="server" Text="Update" />
  <asp:Button ID="btnCustomer_Cancel" runat="server" Text="Cancel" />
  <div class="panel">
  <table id="tablea" class="stripes" runat="server" cellpadding="0" cellspacing="1">
        <td class="style1">Customer ID:</td>
          <asp:Label ID="lblCustomerID" runat="server" />
          <asp:TextBox ID="txtCustID" runat="server" ></asp:TextBox>
        <td class="style1">Entry Date: </td>
          <asp:Label ID="lblEntry" runat="server" />
          <asp:TextBox ID="txtEntry" runat="server" ></asp:TextBox>
        <td class="style1">Company Name:</td>
          <asp:Label ID="lblCompanyName" runat="server" />
          <asp:TextBox ID="txtCompanyName" runat="server" ></asp:TextBox>
        <td class="style1">Status:</td>
          <asp:Label ID="lblStatus" runat="server" />
          <asp:TextBox ID="txtStatus" runat="server" ></asp:TextBox>
        <td class="style1">Tax ID: </td>
          <asp:Label ID="lblTaxID" runat="server" />
          <asp:TextBox ID="txtTaxID" runat="server" ></asp:TextBox>
        <td class="style1">Removal Date:</td>
          <asp:Label ID="lblRemoval" runat="server" />
          <asp:TextBox ID="txtRemoval" runat="server" ></asp:TextBox>
  1. <div class="header">
  2.   <a class="collapse">[-]</a>
  3.   <a>Customer Information</a>
  4.   <div class="button">
  5.   <asp:Button ID="btnCustomer_Edit" runat="server" text="Edit" />
  6.   <asp:Button ID="btnCustomer_Save" runat="server" Text="Save" />
  7.   <asp:Button ID="btnCustomer_Update" runat="server" Text="Update" />
  8.   <asp:Button ID="btnCustomer_Cancel" runat="server" Text="Cancel" />
  9.   </div>
  10.   </div>
  11.   <div class="panel">
  12.   <table id="tablea" class="stripes" runat="server" cellpadding="0" cellspacing="1">
  13.       <tr>
  14.         <td class="style1">Customer ID:</td>
  15.         <td>
  16.           <asp:Label ID="lblCustomerID" runat="server" />
  17.           <asp:TextBox ID="txtCustID" runat="server" ></asp:TextBox>
  18.         </td>
  19.         <td class="style1">Entry Date: </td>
  20.         <td>
  21.           <asp:Label ID="lblEntry" runat="server" />
  22.           <asp:TextBox ID="txtEntry" runat="server" ></asp:TextBox>
  23.         </td>
  24.       </tr>
  25.       <tr>
  26.         <td class="style1">Company Name:</td>
  27.         <td>
  28.           <asp:Label ID="lblCompanyName" runat="server" />
  29.           <asp:TextBox ID="txtCompanyName" runat="server" ></asp:TextBox>
  30.         </td>
  31.         <td class="style1">Status:</td>
  32.         <td>
  33.           <asp:Label ID="lblStatus" runat="server" />
  34.           <asp:TextBox ID="txtStatus" runat="server" ></asp:TextBox>
  35.         </td>
  36.       </tr>
  37.       <tr>
  38.         <td class="style1">Tax ID: </td>
  39.         <td>
  40.           <asp:Label ID="lblTaxID" runat="server" />
  41.           <asp:TextBox ID="txtTaxID" runat="server" ></asp:TextBox>
  42.         </td>
  43.         <td class="style1">Removal Date:</td>
  44.         <td>
  45.           <asp:Label ID="lblRemoval" runat="server" />
  46.           <asp:TextBox ID="txtRemoval" runat="server" ></asp:TextBox>
  47.         </td>
  48.       </tr>
  49.     </table>
  50.     </div>

and was using this as javascript to toggle the tables
Code: [ Select ]
 $(document).ready(function() {
  $(".header").click(function() {  
      $(this).find('a').slice(0, 1).toggleClass("collapsed");
  1.  $(document).ready(function() {
  2.   $(".header").click(function() {  
  3.       $(this).find('a').slice(0, 1).toggleClass("collapsed");
  4.       $(this).next(".panel").slideToggle(500);
  5.     });
  6.   });
  • nightimedweller
  • Newbie
  • Newbie
  • nightimedweller
  • Posts: 7

Post 3+ Months Ago

nvm i've solved the problem
  • spork
  • Brewmaster
  • Silver Member
  • spork
  • Posts: 6297
  • Loc: Seattle, WA

Post 3+ Months Ago

Care to share your solution for future visitors?

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 42 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.