Bootstrap-Akkordeon verhindern Zusammenbruch postback in asp.net

Ich habe eine bootstrap-Akkordeon, wo ich versuche zu öffnen, die zuletzt geöffneten Fenster auf einem postback als wenn jemand klickt auf eine Schaltfläche "speichern" auf meiner Seite. Ich fand diese Lösung: Behalten, Twitter Bootstrap Zusammenbruch Stand auf Aktualisierung der Seite/Navigation

aber bin nicht in der Lage zu kommentieren, da ich habe nicht genug Punkte als Benutzer.

Aus irgendeinem Grund kann ich nicht machen, die Funktion der Arbeit:

//when a group is shown, save it as the active accordion group
$("#applicant-accordion").bind('shown', function () {
    var active = $("#applicant-accordion .in").attr('id');
    $.cookie('activeAccordionGroup', active)
});

Ich versuche zu prüfen, wie es im FireBug, aber ich habe nie bekommen, um die Zeile mit var aktiv. Es Stoppt bei der Zeile mit: $("#Bewerber-Akkordeon).binden. Ich habe versucht, die änderung der .binden .da meine jQuery-version 1.7.2

Ich bin ratlos und ich hoffe, Sie können mich führen, hin zu einer Lösung. Ich Baue es in ASP.NET.

<script src="../Scripts/jquery-1.7.2.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap/js/bootstrap.js" type="text/javascript" />
<link href="../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js" />

<script type="text/javascript">
    $(document).ready(function () {
        var last = $.cookie('activeAccordionGroup');
        if (last != null) {
            //remove default collapse settings
            $("#applicant-accordion .panel-collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).addClass("in");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $.cookie('activeAccordionGroup', active)
    });

</script>

    <div class="accordion" id="applicant-accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#uInfo">Applicant information</a>
            </div>
            <div id="uInfo" class="accordion-body collapse in">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <asp:Panel Visible="false" runat="server" ID="assistancePanel">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#meetgreet">Accommodation and Meet & Greet information</a>
                </div>
                <div id="meetgreet" class="accordion-body collapse">
                    <div class="accordion-inner">
                    </div>
                </div>
            </div>
        </asp:Panel>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#application">Application, documents & options</a>
            </div>
            <div id="application" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#comments">Comments</a>
            </div>
            <div id="comments" class="accordion-body collapse">
                <div class="accordion-inner">
                </div>
            </div>
        </div>

        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="btn accordion-toggle" data-toggle="collapse" data-parent="#applicant-accordion" href="#changelog">Changelog</a>
            </div>
            <div id="changelog" class="accordion-body collapse">
                <div class="accordion-inner" runat="server" id="changelogItems">
                </div>
            </div>
        </div>
    </div>

Hallo, Sie können überprüfen, mein Antwort an: stackoverflow.com/questions/12733238/... . Ich war auch vor dem gleichen Problem.

InformationsquelleAutor Ghost | 2014-07-03

3

In der Regel, Wann immer Sie wollen, behalten Sie einen Wert nach dem postback in ASP.NET es ist ein gemeinsamer Ansatz.

Speichern den Wert in eine ASP.NET versteckte Feld. In Ihrem Fall speichern Sie den Wert des folgenden active variable in einem hiddren Feld.
```
 var active = $("#applicant-accordion .in").attr('id');
```
Nach post zurück durch die Ansichtsstatus in der Trägerschaft der ASP.NET das versteckte Feld wird behalten Sie den Wert. Sie können dann verwenden Sie diesen Wert beim laden der Seite zum einstellen der accordin.
```
$(document).ready(function () {
        var last = //Get value from the hidden field
        if (last != null) {
            //Set the accordin values.
        }
    });
```
Ja, ich sehe. Diese Antwort tatsächlich führen mich zum nachdenken über die Elemente in den DOM-also zog ich die Skripte auf die Unterseite meiner Seite und das machte es Arbeit. Ich betrachte das hiddenfield Ansatz anstelle aber.

InformationsquelleAutor Muthukumar

Nur zu posten, meine Lösung:

Hinzugefügt, hiddenfield:

<asp:HiddenField ID="hfAccordionIndex" runat="server" />

Und das JavaScript am Ende der Seite, um sicherzustellen, dass der DOM hat die Elemente:

<script type="text/javascript">
    $(document).ready(function () {
        var last = $('#<%= hfAccordionIndex.ClientID %>').val();
        if (last != null && last != "") {
            //remove default collapse settings
            $("#applicant-accordion .collapse").removeClass('in');
            //show the account_last visible group
            $("#" + last).collapse("show");
        }
    });

    //when a group is shown, save it as the active accordion group
    $("#applicant-accordion").on('shown', function () {
        var active = $("#applicant-accordion .in").attr('id');
        $('#<%= hfAccordionIndex.ClientID %>').val(active);
    });
</script>

InformationsquelleAutor Ghost

-1

**Aktualisierter code für Akkordeon ausführen können, mit der aktuellen Registerkarte aktiv ist. **

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Header 1 </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">Content 1</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Header 2 </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">Content 2</div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Header 3 </a></h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">Content 3</div>
    </div>
  </div>

  <div class="form-group">
    <hr />
    <asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
    <asp:HiddenField ID="PaneName" runat="server" />
  </div>
</div>


<script type="text/javascript">
  $(function() {
    var paneName = $("[id*=PaneName]").val() != "" ? $("[id*=PaneName]").val() : "collapseOne";
    $("#accordion .collapse").removeClass("in");
    $("#" + paneName).addClass("in");
    $(".panel-heading a").click(function() {
      $("[id*=PaneName]").val($(this).attr("href").replace("#", ""));
    });
  });

</script>

InformationsquelleAutor viom jeet

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.