Why do `JQuery` tabs lose styling after a button click

问题: 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"...>&l...

问题:

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];
     ...
 }

回答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 () {

  • 发表于 2019-03-15 17:34
  • 阅读 ( 262 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除