CODEWITHSUNDEEP
c#jqueryasp.net
Raags
Raags

Reputation: 25

Tabs resetting after selecting drop down list in C# , ASP.net

<ul id="tabs">
  <li><a href="#" name="#tab1"></a></li>
  <li><a href="#" name="#tab2"></a></li>
  <li><a href="#" name="#tab3"></a></li>
  <li><a href="#" name="#tab4"></a></li> 
  <li><a href="#" name="#tab5"></a></li>
  <li><a href="#" name="#tab6"></a></li>
  <li><a href="#" name="#tab7"></a></li>
  <li><a href="#" name="#tab8"></a></li>      


  </div>
  <div id="tab2">

  </div>
  <div id="tab3">


  </div>
  <div id="tab4">

  </div>
  <div id="tab5">

  </div>
  <div id="tab6">
   <table>
          <tr>
              <td style ="color: Black "><asp:DropDownList ID="ddlPageSize1" runat="server" AutoPostBack="True"  onselectedindexchanged="ddlPageSize_SelectedIndexChanged1">
                  <asp:ListItem>10</asp:ListItem>
                  <asp:ListItem>25</asp:ListItem>
                  <asp:ListItem>50</asp:ListItem>
                  <asp:ListItem>100</asp:ListItem>
                  <asp:ListItem>250</asp:ListItem>
                  </asp:DropDownList></td>

          </tr>
          <tr>
             <td colspan="6">
      <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AllowSorting="True" CurrentSortField="ActivityDate" CurrentSortDirection="ASC" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" AutoGenerateColumns="False" OnPreRender="GridView2_PreRender" OnSorting="GridView2_Sorting" BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical" OnRowCommand="GridView2_RowCommand" OnRowCreated="GridView2_RowCreated" >
          <AlternatingRowStyle BackColor="#CCCCCC" />
          <Columns>
              <asp:BoundField DataField="username" HeaderText="username" SortExpression="username" />
              <asp:BoundField DataField="ActivityDate" HeaderText="ActivityDate" SortExpression="ActivityDate" />
              <asp:BoundField DataField="Action" HeaderText="Action" SortExpression="Action" />
              <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
              <asp:BoundField DataField="Outcome" HeaderText="Outcome" SortExpression="Outcome" />
              <asp:TemplateField HeaderText="File" ShowHeader="False"> <ItemTemplate>
            <asp:LinkButton ID="LinkButton1" runat="server" 
                CausesValidation="False" 
                CommandArgument='<%# Eval("ImportedFilename") %>'
                CommandName="Download" Text='<%# Eval("ImportedFilename") %>'>
                </asp:LinkButton>
        </ItemTemplate>
     </asp:TemplateField>
          </Columns>
          <FooterStyle BackColor="#CCCCCC" />
          <HeaderStyle BackColor="#999999" Font-Bold="True" ForeColor="Black" BorderStyle="Dashed" BorderWidth="1" BorderColor="Black" Font-Size="Medium" Font-Names="Arial" />
          <PagerStyle  ForeColor="#330099" HorizontalAlign="Center" BorderStyle="None" />
          <RowStyle BackColor="White" BorderStyle="Solid" BorderWidth="1" BorderColor="Black" Font-Size="Medium" HorizontalAlign="Center" ForeColor="Black"/>
          <SortedAscendingCellStyle BackColor="#F1F1F1" />
          <SortedAscendingHeaderStyle BackColor="#808080" />
          <SortedDescendingCellStyle BackColor="#CAC9C9" />
          <SortedDescendingHeaderStyle BackColor="#383838" />
      </asp:GridView>

       </td>          
        </tr>
          <tr>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
          <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Label ID="Label5" runat="server" Text="Label"></asp:Label></td>
          <td style ="color: Black ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Page Number:<asp:DropDownList ID="ddlPageNumbers1" runat="server" AutoPostBack="True" onselectedindexchanged="ddlPageNumbers_SelectedIndexChanged1"></asp:DropDownList></td>          
           </tr>
      </table>
      <asp:ObjectDataSource ID="ObjectDataSource2" runat="server" SelectMethod="GetAllImportLogs" TypeName="demo.ImportLogAccessLayer">
          <SelectParameters>
              <asp:Parameter Name="pageIndex" Type="Int32" />
              <asp:Parameter Name="pageSize" Type="Int32" />
              <asp:Parameter Name="sortExpression" Type="String" />
              <asp:Parameter Name="sortDirection" Type="String" />
              <asp:Parameter Direction="Output" Name="totalRows" Type="Int32" />
          </SelectParameters>
      </asp:ObjectDataSource>

  </div>
  <div id="tab7">

  </div>
  <div id="tab8">
   </div>   


  function resetTabs() {
      $("#content > div").hide(); //Hide all content
      $("#tabs a").attr("id", ""); //Reset id's     

  }

  var myUrl = window.location.href; //get URL
  var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2     
  var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab


Sys.Application.add_Load(tabs);
      (function tabs() {
      $("#content > div").hide(); // Initially hide all content
      $("#tabs li:first a").attr("id", "current"); // Activate first tab
      $("#content > div:first").fadeIn(); // Show first tab content

      $("#tabs a").on("click", function (e) {
          e.preventDefault();
          if ($(this).attr("id") == "current") { //detection for current tab
              return
          }
          else {
              resetTabs();
              $(this).attr("id", "current"); // Activate this
              $($(this).attr('name')).fadeIn(); // Show content for current tab
          }
      });

      for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content        
          }
      }
  })()

When ever I try to use dropdown in tab 6, It resets to tab 1. The dropdown list works fine, but i have to again click tab 6 to look at the result. I tried to fix it several ways, it did not work. Any help would be appreciated to prevent the tabs from getting resetting.

Upvotes: 1

Views: 1404

Answers (3)

Raags
Raags

Reputation: 25

Besides the method suggested by @Webruster. I was also able to solve the issue by using "Update Panel". Thanks everyone for the suggestions.

Upvotes: 0

Tummala Krishna Kishore
Tummala Krishna Kishore

Reputation: 8271

Add your Jquery code inside Sys.Application.add_load( //your code here) on DOM ready

EDIT 2 (Removed Reset Tabs function and calling directly in add_load

<script type="text/javascript">
    $(document).ready(function () {
        Sys.Application.add_load(function () {
           $("#content > div").hide(); //Hide all content
         $("#tabs a").attr("id", ""); //Reset id's     

                $("#content > div").hide(); // Initially hide all content
                $("#tabs li:first a").attr("id", "current"); // Activate first tab
                $("#content > div:first").fadeIn(); // Show first tab content

                $("#tabs a").on("click", function (e) {
                    e.preventDefault();
                    if ($(this).attr("id") == "current") { //detection for current tab
                        return
                    }
                    else {
                        resetTabs();
                        $(this).attr("id", "current"); // Activate this
                        $($(this).attr('name')).fadeIn(); // Show content for current tab
                    }
                });

                for (i = 1; i <= $("#tabs li").length; i++) {
                    if (myUrlTab == myUrlTabName + i) {
                        resetTabs();
                        $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
                        $(myUrlTab).fadeIn(); // Show url tab content        
                    }
                }

        });
    });
</script>

Upvotes: 1

Lali
Lali

Reputation: 2866

When you select value from dropdown, your page PostBack (Most probably it is requirement). Now this post back takes you to server side, and the core issue is that you are not telling server that you are on 6th tab.

Pass the tab id to server so that when postback returns, it will check tab Id and will set the same tab enabled.

However if you are not re-loading data then disable reloading which is actual cause of the issue.

Upvotes: 0

Related Questions