1

I am using JQuery tabs in my Asp.Net/C# app.

I am modelling my approach after this article. The JQuery is outside of my 

<asp:UpdatePanel ID="UpdatePanel1"...></asp:UpdatePanel>

wrapper while the html components are inside.

enter image description here

Whenever I click a button, my tabs completely lose their CSS styling and I see all of the tab contents, rather than just the 

<div id="current-tab">

for that tab.

Why is this happening and how do I fix it?

My guess is that its related to post-back or the update panel somehow, but I am not sure why the added C# code under page_load doesn't keep the selected tab current on post-back when the button is fired.

enter image description here ASPX

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
        var tabs = $("#tabs").tabs({
            activate: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs('select', selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
        ...
</script>
....
<table>
  <tr>
    <td style="padding: 5px;">                                
      <div id="tabs">
        <ul>
          <li><a href="#tab-1">Tier 1</a></li>
          <li><a href="#tab-2">Tier 2</a></li>
          <li><a href="#tab-3">Tier 3</a></li>
          <li><a href="#tab-4">Tier 4</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab-1">
             ...
            </div>
            <div id="tab-2">
             ...
            </div>
            <div id="tab-3">
             ...
            </div>
            <div id="tab-4">
             ...
            </div>
          </div>
        </div>
        <asp:HiddenField ID="selected_tab" runat="server" />
      </td>
  </tr>
</table>

C# 

 protected void Page_Load(object sender, EventArgs e)
 {
     ...
     selected_tab.Value = Request.Form[selected_tab.UniqueID];
     ...
 }
gwydion93
  • 1,681
  • 3
  • 28
  • 59

1 Answers1

1

You are right, it has something to do with a Partial PostBack. So in order for jquery functions to work again you need to rebind it after the Partial PostBack is done.

<script type="text/javascript">
    $(document).ready(function () {
        buildTabs();
    });

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function () {
        buildTabs();
    });

    function buildTabs() {
        var tabs = $("#tabs").tabs({
            activate: function (e, i) {
                selected_tab = i.index;
            }
        });
        selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
        tabs.tabs('select', selected_tab);
        $("form").submit(function () {
            $("[id$=selected_tab]").val(selected_tab);
        });
    }
</script>

But the selected tab is a different story. You also need to store the active tab somewhere and re-apply it after the partial PostBack is done. See this answer for details. But basically you need to store the active tab ID in SessionStorage, cookie or Hiddden input and re-apply it in prm.add_endRequest(function () {

VDWWD
  • 35,079
  • 22
  • 62
  • 79
  • This resolved the loss of styling, but in regards to keeping the selected tab open after postback, I have a question. Would the `selected_tab` variable not have the active tab id? – gwydion93 Mar 11 '19 at 19:25
  • That could very well be the case. I did not examine the code for creating the actual tabs. But if you can re-apply the tab from that variable it should work. – VDWWD Mar 11 '19 at 19:30
  • Nope, it just returns an index variable of 0. Not sure if that's what is suppose to be returned. – gwydion93 Mar 11 '19 at 19:53
  • 1
    You can bind a click event to the tabs with jquery that reads the ID. But you need to give them one `` – VDWWD Mar 11 '19 at 19:55