Meine Bootstrap-Warnung wird nach dem Schließen nicht angezeigt

Hallo, ich habe die folgende Warnung, die auf der Seite ausgeblendet ist

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    @TempData["selCode"]
</div>

Ich zeige es mit dem folgenden Javascript an

    $('#send_reject_btn').click(function () {
        var selRowIds = $("#ApprovalGrid").jqGrid('getGridParam', 'selarrrow');
        if (selRowIds.length > 0) {
            $('#reject_alert').show();
        } else {
            $('#selectCodeNotificationArea').show();
        }
    });

Dies ist offensichtlich mit einer Schaltfläche in meinem HTML verknüpft.

Nachdem die Warnung angezeigt wird, wenn ich sie mit dem schließe<button type="button" class="close" data-dismiss="alert">&times;</button> Das nächste Mal, wenn ich die Taste drücke, um die Warnung zu öffnen, die ich sehen kann $('#selectCodeNotificationArea').show(); in meinem Debug-Bildschirm aufgerufen, aber die Warnung wird nicht erneut angezeigt.

Hat das schon mal jemand erlebt?

Das Data-dismiss entfernt das Element komplett. Sie müssen die Warnung ausblenden, wenn Sie beabsichtigen, sie erneut anzuzeigen.

Zum Beispiel;

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
    <button type="button" class="close" data-hide="alert">&times;</button>
    @TempData["selCode"]
</div>

und diese JS

$(function(){
    $("[data-hide]").on("click", function(){
        $(this).closest("." + $(this).attr("data-hide")).hide();
    });
});

Der bessere Weg ist zu entfernen, data-dismiss="alert" aus Ihrem Tag , und verwenden Sie den Klassennamen , dh schließen , um den Fehler / die Warnung auszublenden und anzuzeigen .

// WHEN CLOSE CLICK HIDE THE ERROR / WARNING .
$(".close").live("click", function(e) 
{   
    $("#add_item_err").hide();
});

// SOME EVENT TRIGGER IT.
$("#add_item_err").show();

[ I am working on dynamically added elements , that’s why I am using ‘live’ , you may have to change as per your req.]

Bootsrap $(selector).alert('close') (http://getbootstrap.com/javascript/#alerts) entfernt tatsächlich das Warnelement, sodass Sie es nicht erneut anzeigen können. Um die gewünschte Funktionalität zu implementieren, entfernen Sie sie einfach data-dismiss="alert" -Attribut aus der Definition der Schaltfläche „Schließen“ und fügen Sie einen kleinen Event-Handler hinzu, um die Warnung auszublenden

<div class="alert alert-success" id="selectCodeNotificationArea" hidden="hidden">
   <button type="button" class="close alert-close">&times;</button>
   @TempData["selCode"]
</div>

<script>
$(function() {
   $(document).on('click', '.alert-close', function() {
       $(this).parent().hide();
   })
});
</script>

Ich bin auch auf dieses Problem gestoßen und das Problem mit der oben angekreuzten Lösung ist, dass ich immer noch Zugriff auf die Standard-Bootstrap-Alarm-Close-Ereignisse benötige.

Meine Lösung war, a zu schreiben kleines, anpassbares jquery-Plugin Das fügt mit minimalem Aufwand einen richtig geformten Bootstrap 3-Alarm (mit oder ohne Schließen-Schaltfläche, wie Sie ihn benötigen) ein und ermöglicht es Ihnen, ihn nach dem Schließen der Box einfach zu regenerieren.

Sehen https://github.com/davesag/jquery-bs3Alert für die Verwendung, Tests und Beispiele.

Tatsächlich sind Bootstrap-Warnungen so konzipiert, dass sie entfernt und nicht versteckt werden. Sie können erkennen, dass die Warnmeldung kein Umbruchelement enthält. Daher erfordert jeder Versuch, die Warnmeldung zu ändern, zusätzlichen Code (Suchen von Textknotenelementen). Sie sollten Ihre Anwendung neu gestalten und jedes Mal ein neues .alert-Element erstellen, wenn Sie bereit sind, es zu ändern / erneut anzuzeigen.

Ich habe den folgenden Arbeitsansatz verwendet.

$(document).ready(function(){
    $("#btnFV").click(function()
    {
        $("#alertFV").addClass("in");
    });

    $("#alertFV").on("close.bs.alert", function ()
    {
        $("#alertFV").removeClass("in");
        return false;
    });
});

Der HTML-Text enthält die folgende Warnung

<button id="btnFV" class="form-control">Button To Show/Hide Alert</button>

<div id="alertFV"  class="alert alert-danger alert-dismissable fade show">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
         <span aria-hidden="true">&times;</span>
      </button>
      <strong>Danger!</strong> 
    </div>

Bootstrap 5-Lösung –> Getestet mit .NET Core 5.0

Der Bootstrap-Alert-HTML-Code (diese werden in einer Razor View-Komponente gespeichert)

<!-------------------------------->
<!-- INFORMATION Bootstrap Alert-->
<!-------------------------------->
<div class="alert alert-info alert-dismissible fade show bg-info" role="alert" id="bootstrapInformationAlertDiv" style="display:none;">
    <div class="custom-alert-div-information text-light font-weight-bold text-dark" id="bootstrapInformationAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapInformationAlertBtn"></button>
</div>
<!---------------------------->
<!-- SUCCESS Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-success alert-dismissible fade show bg-success" role="alert" id="bootstrapSuccessAlertDiv" style="display:none;">
    <div class="custom-alert-div-success text-light font-weight-bold" id="bootstrapSuccessAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapSuccessAlertBtn"></button>
</div>
<!---------------------------->
<!-- WARNING Bootstrap Alert-->
<!---------------------------->
<div class="alert alert-warning alert-dismissible fade show bg-warning" role="alert" id="bootstrapWarningAlertDiv" style="display:none;">
    <div class="custom-alert-div-warning text-black font-weight-bold" id="bootstrapWarningAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapWarningAlertBtn"></button>
</div>
<!--------------------------->
<!-- DANGER Bootstrap Alert-->
<!--------------------------->
<div class="alert alert-danger alert-dismissible fade show bg-danger" role="alert" id="bootstrapDangerAlertDiv" style="display:none;">
    <div class="custom-alert-div-danger text-light font-weight-bold" id="bootstrapDangerAlertMessageDiv">&nbsp;</div>
    <button type="button" class="btn-close" aria-label="Close" id="bootstrapDangerAlertBtn"></button>
</div>

Die obige Ansichtskomponente wird oben auf jeder Webseite hinzugefügt:

<!-- Bootsrap Alert View Component -->
<div>
    @await Component.InvokeAsync("BootstrapAlert")
</div>

Ich habe dann meinem Projekt eine kleine JS-Datei hinzugefügt (bootstrapAlert.js):

$("#bootstrapInformationAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapSuccessAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapWarningAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

$("#bootstrapDangerAlertBtn").click(function () {
    event.preventDefault();
    $(this).parent().hide();
});

In meiner Hauptdatei Layout.cshtml füge ich die Skriptreferenz zur obigen js-Datei hinzu, damit sie automatisch mit jeder Seite meiner Website geladen wird:

<!-- Load the js script file on each page for hiding the bootstrap alert when closed -->
<script src="~/js/bootstrap-alert-custom-scripts/bootstrapAlert.js"></script>

Wenn ich eine Bootstrap-Warnung aufrufe, um sie von einer meiner Javascript-Funktionen zu öffnen, verwende ich den folgenden Code:

window.scrollTo(0, 0); // Scroll to the top of the page.
document.getElementById("bootstrapWarningAlertMessageDiv").innerHTML = 'Write your custom message here for the current issue / notification!';
$("#bootstrapWarningAlertDiv").show();
setTimeout(function () { $("#bootstrapWarningAlertDiv").hide(); }, 8000);

Der Befehl zum Scrollen des Fensters ist eine nette kleine Geste, da der Benutzer möglicherweise ein Stück weit auf der Seite nach unten gescrollt wird und wenn Sie die Warnung immer an derselben Stelle hinzufügen, dh oben auf der Seite, dann würde er sie nicht unbedingt sehen wenn es sich öffnet.