Почему вкладки `JQuery` теряют стиль после нажатия кнопки - PullRequest
Новая
       10

Почему вкладки `JQuery` теряют стиль после нажатия кнопки

1 голос
/ 11 марта 2019

Я использую JQuery вкладки в моем Asp.Net/C# приложении.

Я моделирую свой подход после этой статьи. JQuery находится за пределами моей 

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

оболочки, в то время как html-компоненты находятся внутри.

enter image description here

Всякий раз, когда я нажимаю кнопку, мои вкладки полностью теряют свой стиль CSS, и я вижу все содержимое вкладок, а не только 

<div id="current-tab">

для этой вкладки.

Почему это происходит и как это исправить?

Я предполагаю, что это как-то связано с постбэк или панелью обновления, но я не уверен, почему добавленный код C# в page_load не поддерживает текущую выбранную вкладку на post-backкогда кнопка срабатывает.

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 Ответ

1 голос
/ 11 марта 2019

Вы правы, это как-то связано с Partial PostBack. Поэтому, чтобы функции jquery снова заработали, вам нужно перепривязать их после того, как Partial PostBack завершен. 

<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>

Но выбранная вкладка - это другая история. Вам также нужно где-то сохранить активную вкладку и повторно применить ее после того, как будет выполнен частичный PostBack. См. этот ответ для подробностей. Но в основном вам нужно сохранить идентификатор активной вкладки в SessionStorage, cookie или вводе Хидддена и повторно применить его в prm.add_endRequest(function () {

...