web-dev-qa-db-ja.com

ASP.NETポストバック後も、現在のjQueryアコーディオンペインを開いたままにしますか？

Asp.net aspxweppageにjqueryアコーディオンがあります。ペイン内には、asp.netボタンがあります。ボタンをクリックすると、表示していたペインが閉じてページを再読み込みし、デフォルトで最初のペインになります。リロードは気にしませんが、リロード後に現在のペインを開いたままにする方法はありますか。今、私はアコーディオンのIDを持つdivでaccordion（）を呼び出しています。

asp.netjqueryjquery-ui
20
Xaisoft

非表示の入力フィールドを使用して、ポストバック中にアクティブなアコーディオンインデックスを永続化し、アコーディオンの変更イベント中にjavascriptを使用してデータを設定できます。

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

<script language="javascript" type="text/javascript">
    $(function(){
        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());

        $("#accordion").accordion({
            autoHeight:false,
            event:"mousedown",
            active:activeIndex,
            change:function(event, ui)
            {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });
    });
</script>

変更イベント中にアクティブなインデックスをキャプチャするより効率的な方法を思い付く可能性がありますが、これは機能しているようです。

ページが読み込まれると、非表示フィールドからアクティブなインデックスが取得され、変数に格納されます。次に、取得したインデックスとカスタム関数を使用してアコーディオンを初期化し、新しいペインがアクティブ化されるたびに非表示フィールドに新しいインデックスを書き込む変更イベントで起動します。

ポストバック中、非表示フィールドの値はViewStateに保持されるため、ページが再度読み込まれると、最後にクリックされたペインのインデックスでアコーディオンが初期化されます。

27
MaxCarey

MaxCareyのソリューションはうまく機能しているようですが、最新バージョンのjQuery UI（1.10.4）にはいくつかの違いがあるようです。正しいイベントは現在「変更」されていませんが、「アクティブ化」（または、イベントをキャンセルするオプションが必要な場合は「beforeActivate」）です。

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

$(document).ready(function () {
    var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val());

    $("#accordion").accordion({
        heightStyle: "content",
        active: activeIndex,
        activate: function (event, ui) {
            var index = $(this).children('h3').index(ui.newHeader);
            $("#<%=hidAccordionIndex.ClientID %>").val(index);
        }
    });
});

ここでの落とし穴は、hidAccordionIndex値が適切な値に設定されていることを確認できることですが、ポストバックでは、何を試しても0に戻されます。 Dave.Lebr1が提案したように、空の文字列に設定しようとしましたが、ポストバックでまだ保持されていません。

私のdivAccordionIndexフィールドにはViewStateが必要なので、これはポストバックでも引き続き使用できます（有効になっていることを確認しました）。

他の誰かがこれで成功しましたか？このメニューは私のマスターページにあり、これ以外はうまく機能します。

7
Yelnic

クリックまたは更新が必要な可能性のあるボタンまたはグリッドビューを[更新]パネルに配置します。その後、uiアコーディオンは100％+保証で正常に動作します。Sarath@ f1

1
user3867250

以前のHiddenFieldのアイデアを拡張するには、JSをマングルする必要はありません。

あなたのページ：

<asp:HiddenField runat="server" ID="hidAccordionIndex" Value="0" ClientIDMode="Static" />

JS内：

$('#yourAccordion').accordion({
    heightStyle: "content"
    , active: parseInt($('#hidAccordionIndex').val())
    , activate: function (e, ui) {
        $('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader));
    }
});

キーはClientIDMode = "Static"です。 JSを変更する必要はなく、1つの非表示フィールドのみを変更する必要があるため、このアプローチはほとんどすべてのサーバーサイド言語で機能するようにほとんど変更を加えていません。

1
rainabba

私はこれが遅いことを知っています、しかしそれはまだこれに苦しんでいる誰かを助けるかもしれません。ここでの解決策は、基本的に上記の知恵のいくつかの組み合わせです。 ;-)

Jquery-ui-1.10.4.custom.min.jsとjquery-1.6.3.min.jsを使用しています。

 <%--the hidden field saves the active tab during a postback--%>
        <asp:HiddenField ID="hdLastActive" runat="server" Value="0" />
    </div>
</form>

そしてここにjavaScriptがあります：

<script type="text/javascript">
$(document).ready(function () {
    // get the last active tab index -or 0 on initial pagee load- to activate the tab
    var activeTab = parseInt($("[id$='hdLastActive']").val());

    // initialize the accordion to the activeTab and set the activate event to save the last active tab index.
    $("#accordion").accordion({
        active: activeTab,
        activate: function (e) {
            // save the active tab index in the hidden field
            $("[id$='hdLastActive']").val($(this).accordion("option", "active"));                
        }
    });
});
1
gm.

ClientScript.RegisterStartupScriptを使用して、ボタンが押されたアコーディオンペインのインデックスまたはIDを書き込みます。ユーザーがペイン3にあるbtnSubmitという名前のボタンをクリックするとします。次のように機能します。

protected void btnSubmitClick(object sender, EventArgs e)
{
    //process button click

    //class this function at end:
    SetAccordionPane(3);
}

//you can call this function every time you need to set specific pane to open
//positon
private void SetAccordionPane(int idx)
{
    var s="<script type=\"text/javascript\">var paneIndex = "
      + idx +"</script">; 
    ClientScript.RegisterStartupScript(typeof(<YourPageClass>, s);
}

今javascriptで：

$(function(){

    if(paneIndex)
    {
        $('.selector').accordion({active: paneIndex});
    }
    else
    {
        $('.selector').accordion();
    }
});
1
TheVillageIdiot

それは私の側で働いていますチェックしてください......

$(document).ready(function () {
    var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());
    alert(activeIndex);
    $("#accordion").accordion({            
        active: activeIndex,
        beforeActivate: function (event, ui) {                
            var index = $(this).children('h3').index(ui.newHeader);
            $('#<%=hidAccordionIndex.ClientID %>').val(index);                
        }            
    });        
});
1
Om Prakash

私はここに来たのと同じ問題を抱えていました。 1. MaxCareyの回答は問題を解決するのに十分良さそうだったが、残念ながら私はアコーディオンのIDを持っていなかった。 （私はサードパーティのテンプレートを使用していました。彼らはcssクラスを使用しているだけです）。 2. Imran H. Ashrafも良かったが、同じ問題でIDによるアコーディオンへのアクセスがなかった。

私の問題：1。EditUpdateCancelコマンドと一致するDetailsViewがありました。 2. [編集]ボタンをクリックすると機能しますが、アコーディオンが閉じます。

私の解決策：1。フォームにScriptManagerを1つ配置します。 2.アコーディオン内に1つのUpdatePanelを配置しました。 3.DetailsViewをUpdatePanel内に配置しました。 4.これで、コーディングもコード開発も不要で、正常に機能します。

これがhtmlマークアップです：

<div class="accordion-wrapper first-child">
<a href="javascript:void(0)" class="accordion-title orange"><span>Personal Information</span></a>
<div class="accordion" style="display: none;">
    <div class="iqb-field-area">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:DetailsView ID="dvPersonalInfo" runat="server" Height="50px" Width="100%" AutoGenerateRows="False"
                    DataSourceID="dsPersonalInfo">
                    <Fields>
                        <asp:BoundField DataField="PTCP_FullName" HeaderText="Full Name" ReadOnly="True"
                            SortExpression="PTCP_FullName" />
                        <asp:BoundField DataField="PTCP_ContactNumber" HeaderText="Contact Number" SortExpression="PTCP_ContactNumber" />
                        <asp:BoundField DataField="PTCP_email" HeaderText="e-mail" SortExpression="PTCP_email" />
                        <asp:BoundField DataField="PTCP_PhysicalAddress" HeaderText="Physical Address" SortExpression="PTCP_PhysicalAddress" />
                        <asp:CommandField ShowEditButton="True">
                            <ControlStyle CssClass="right button" />
                        </asp:CommandField>
                    </Fields>
                </asp:DetailsView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

それが誰かを助けるかもしれないことを願っています。

ハッピーコーディングに感謝

0
Iqbal

このソリューションを使用してプロジェクトで機能させていますが、何かが機能していませんでした。

まず、アコーディオンはインデックスをメモリに保持しないため、アコーディオンは毎回再初期化されていました。

次に、'#<%=hidAccordionIndex.ClientID %>'で隠しフィールドを見つけることができませんでした

だから、私がしていることは

1-非表示フィールドのデフォルト値をnullに設定します

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

2-これでアクティブなインデックスを取得します

必ずparseIntを実行してください。そうしないと、機能しません。

 var activeIndex = parseInt($('input[id$=hidAccordionIndex]').val());

私のjavascriptコードがあります：

  $("#accordion").accordion
({
        autoHeight:false,
        event: "mousedown",
        active: activeIndex,
        collapsible: true,
        change: function (event, ui) 
        {
            var index = $(this).accordion("option", "active");
            $('input[id$=hidAccordionIndex]').val(index);
        }
});
0
davidlebr1
        var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val());       

        $("#accordion,#inneraccordian").accordion({
            heightStyle: "content",
            collapsible: true,
            navigation: true,
            active: activeIndex,
            beforeActivate: function (event, ui) {
                var index = $(this).children('h3').index(ui.newHeader);
                $('#<%=hidAccordionIndex.ClientID %>').val(index);
            }
        });
0
Yogesh Jiwankar

アコーディオンを作成するときは、「アクティブ」オプションを使用してください。このようなもの：

$('.selector').accordion({ active: 2 });

これにより、アコーディオンの2番目のオプションがアクティブになります。セレクターを渡してIDで選択することもできます。

0
Mattias Jakobsson
$("#accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    navigation: true
});

navigationプロパティをtrueに設定すると、アコーディオンパネルの状態が保持されます。

0
Imran H. Ashraf

MaxCareyの投稿に追加するには...
新しいアコーディオンインデックスを取得するためのより信頼性の高い方法は

change: function (event, ui) {
    var index = $(this).accordion("option", "active");
    $("#<% =hidAccordionIndex.ClientID %>').val(index);
}
0
Wayland Young