web-dev-qa-db-ja.com

ポストバック全体で現在のjQueryタブにとどまりますか？

JQueryタブとASP.NETリストビューを使用して、いくつかの情報を表示および編集しています。私の問題は、ユーザーがリストビューアイテムの1つに新しいレコードを挿入すると、jQueryタブが最初のタブに戻ることです。私がどのタブを使用しているかを追跡したり、ポストバックで休まないようにする方法はありますか？

asp.netjquerypostback
20
Abe Miessler

ASP.NETでは、Cookieを使用せずに非表示フィールドに格納できます（jQuery Cookie参照は必要ありません）。

これを使って：

$(function () {
    $("#tabs").tabs({ 
        activate: function() {
            var selectedTab = $('#tabs').tabs('option', 'active');
            $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
        },
        active: <%= hdnSelectedTab.Value %>
    });
});

次に、本文で、非表示のタブフィールドを宣言します。

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

基本的に、タブを選択すると、選択したタブの値がasp非表示フィールドに保存されます。次に、ショーで値を取得しています。

33
Lloyd Powell

JQueryおよびjQueryUIの新しいバージョンでは、これは次のようになります。

$(function () {
    $("#tabs").tabs({
        activate: function() {
            var selectedTab = $('#tabs').tabs('option', 'active');
            $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
        },
        active: document.getElementById('<%= hdnSelectedTab.ClientID %>').value
    });
});

「選択済み」オプションは「アクティブ」に置き換えられます...もちろん、非表示フィールドを追加する必要があります。

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
30
Eaglan Kurek

組み込みサポートjQuery cookieプラグイン （ 直接ダウンロード ）があります。あなたはそれをこのように使います：

$("#tabs").tabs({
  cookie: { expires: 7 }  //1 week
});

これはポストバック全体で維持することと同じではありませんが、通常は望ましい効果を提供します。

4
Nick Craver

これを試して：

ページに追加：

<asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />

スクリプトに追加します。

$(function () {
    var activeIndex = parseInt($get("hdnSelectedTab").value);
    $("#tabs").tabs({
        active: activeIndex,
        activate: function (event, ui) {
            $get("hdnSelectedTab").value = ui.newTab.index();
        }
    });
});
2
Olegs

このソリューションは私のために働いた：ソース http://saradesh.com/tajuddin/index.php/keep-the-selected-jquery-tab-active-on-partial-post-back-in-asp-net /

<script type="text/javascript">
        var selTab;
        $(function () {
            var tabs = $("#tabs").tabs({
                show: function () {
                    //get the selected tab index
                    selTab = $('#tabs').tabs('option', 'selected');

                }
            });

        });

    function pageLoad(sender, args) {

        if (args.get_isPartialLoad()) {

            $("#tabs").tabs({show: function () {
                    //get the selected tab index on partial postback
                    selTab = $('#tabs').tabs('option', 'selected');

                }, selected: selTab  });

        }
    };

    </script>
1
Bat_Programmer

これを行うと、現在のタブを取得できます。

var selected = $tabs.tabs('option', 'selected');

次に、次のようにして（POSTの完了時に）タブを選択できます。

$tabs.tabs('select', selected);

タブの選択は0ベースのインデックスであるため、2を選択すると、3番目のタブが選択されることに注意してください。

0
JasCav

私は.NETの担当者ではありませんが、フォームのsubmit（）イベントにフックして、現在アクティブなタブをフォームデータとともにサーバーに送信することができます。このようにして、実際にDOMとJSを生成するときに、サーバー側で適切なタブを選択するだけで済みます。

何かのようなもの...

$("#the_form").submit(function(){
  var $form            = $(this);
      selected_tab_idx = $("#the_tabs").tabs( "option", "selected" );
  $('<input />', {type: hidden, name: 'tab_index', value: selected_tab_idx}).appendTo( $form );
  return true;
});
0
BBonifield