Felder können nicht in Bootstrap-komprimierten Panels gelöscht werden - javascript, twitter-bootstrap, panel

Auf einer Suchseite habe ich mehrere Bootstrap-Panels wie dieses:

tabSearchPart1

Es öffnet sich die folgende Registerkarte, wenn Sie klicken @ {Html.RenderPartial ("_ tabSearchPart1"); }

Ich habe oben auf der Seite einen Reset-Button, der alle Felder löscht:

Es ruft den folgenden Code auf:

    $("#searchReset").click(function () {
$(":input")
.not(":button, :submit, :reset, :hidden")
.val("")
.removeAttr("checked")
.removeAttr("selected");
});

Nun, das funktioniert perfekt, außer imausgeblendete Registerkarten. Wenn sie ausgeblendet sind, werden sie nicht gelöscht. Wenn ich auf die Registerkarte klicke, um sie zu öffnen und dann auf die Schaltfläche zum Zurücksetzen tippen, werden die Felder in dieser Registerkarte gelöscht.

Ich habe versucht, diese Zeile in den obigen Codeblock einzufügen: $ ("# tabSearchPart1"). collapse ("show"); aber es scheint keine Wirkung zu haben.

Ich habe versucht, jedes Panel so einzustellen, dass es beim Zurücksetzen vor dem Löschen angezeigt wird, aber es wurde nur alles angezeigt, ohne die Felder zu löschen.

Kennt jemand eine Möglichkeit, Felder in einem ausgeblendeten Panel zu löschen?

Ich ziehe es vor, keinen Ereignis-Listener einzubeziehen, da er enden könnte, wenn ich auf die Tabs klicke.

Antworten:

0 für die Antwort № 1

Das Problem ist, dass sich jquery nicht auf die nicht darstellenden Elemente auswirkt (Anzeige: keine). Ich würde versuchen, die Standard-CSS für die ausgeblendeten Registerkarten zu überschreiben.

Default ist dies:

.tab-content>.tab-pane {
display: none;
visibility: hidden;
}

.tab-content>.active {
display: block;
visibility: visible;
}

Versuchen Sie es stattdessen:

.tab-content>.tab-pane {
display: block;
visibility: visible;
position:absolute;
top:-99999px;
left:-99999px;
}

.tab-content>.active {
position:static;
top:0;
left:0;
display: block;
visibility: visible;
}

(Stellen Sie sicher, dass CSS nach dem Standard-Bootstrap-CSS hinzugefügt wird.)

Dies garantiert, dass die Elemente für jQuery verfügbar sind und anschließend gelöscht werden können.

HTH,

-Ted

---