it-swarm.com.de

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 einem Button in meiner HTML-Datei verknüpft.

Nachdem die Warnmeldung angezeigt wird, wenn ich sie mit dem Befehl <button type="button" class="close" data-dismiss="alert">&times;</button> schließe, kann ich beim nächsten Drücken der Taste zum Öffnen der Warnmeldung $('#selectCodeNotificationArea').show(); in meinem Debug-Bildschirm aufrufen. Die Warnmeldung wird jedoch nicht mehr angezeigt.

Hat jemand das schon mal erlebt? 

42
Jeff Finn

Das Daten-Entfernen entfernt das Element vollständig. Sie müssen den Alarm ausblenden, wenn Sie ihn erneut anzeigen möchten.

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();
    });
});
66

Besser ist es, data-dismiss="alert" aus Ihrem Tag zu entfernen und den Klassennamen zu verwenden, d. H. Close, 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();

[Ich arbeite an dynamisch hinzugefügten Elementen, deshalb verwende ich 'live', Sie müssen sich möglicherweise entsprechend Ihrer Anforderungen ändern.]

7
shashikant

Bootsrap $(selector).alert('close') ( http://getbootstrap.com/javascript/#alerts ) entfernt das Benachrichtigungselement, sodass es nicht mehr angezeigt werden kann. Um die gewünschte Funktionalität zu implementieren, entfernen Sie einfach das data-dismiss="alert"-Attribut aus der Schaltfläche zum Schließen der Schaltfläche und fügen Sie einen kleinen Ereignishandler 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 angekreuzten Lösung oben ist, dass ich immer noch Zugriff auf die standardmäßigen Bootstrap-Alarme zum Schließen haben muss.

Meine Lösung bestand darin, ein kleines, anpassbares Jquery-Plugin zu schreiben, das mit einem Minimum an Aufwand einen ordnungsgemäß geformten Bootstrap 3-Alarm (mit oder ohne Schließen, je nach Bedarf) injiziert und es Ihnen ermöglicht, ihn nach der Box leicht zu regenerieren ist geschlossen.

Informationen zur Verwendung, Tests und Beispielen finden Sie unter https://github.com/davesag/jquery-bs3Alert .

1
Dave Sag

Eigentlich sollten Bootstrap-Alarme nicht versteckt, sondern entfernt werden. Sie können feststellen, dass durch das Anzeigen der Alert-Nachricht kein Wrapping-Element vorhanden ist. Jeder Versuch, die Alert-Nachricht zu ändern, erfordert daher zusätzlichen Code (Suchen Textknotenelemente) ..__ Sie sollten Ihre Anwendung jedes Mal neu entwerfen und ein neues .alert-Element erstellen, wenn Sie sie ändern oder erneut anzeigen möchten.

0
user3263221

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;
    });
});

HTML Körper enthält unten Alarm

<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>
0
jsa