web-dev-qa-db-fra.com

Mon alerte Bootstrap ne s'affichera pas après avoir été fermée

Bonjour, j'ai l'alerte suivante qui est cachée sur la page

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

Je l'affiche avec le javascript suivant

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

Ceci est évidemment lié à un bouton dans mon HTML.

Une fois que l'alerte est affichée si je la ferme à l'aide du <button type="button" class="close" data-dismiss="alert">&times;</button>. La prochaine fois que j'appuie sur le bouton pour ouvrir l'alerte, je peux voir que $('#selectCodeNotificationArea').show(); est appelé dans mon écran de mise au point, mais l'alerte ne s'affiche plus.

Quelqu'un at-il déjà vécu cela? 

javascriptjqueryhtmltwitter-bootstrap
42
Jeff Finn

La suppression de données supprime complètement l'élément. Vous devrez masquer l'alerte si vous souhaitez la réafficher.

Par exemple;

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

et ce JS

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

Le meilleur moyen consiste à supprimer, data-dismiss="alert" de votre balise, et à utiliser le nom de classe, c’est-à-dire près de, pour masquer et afficher l’erreur/avertissement.

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

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

[Je travaille sur des éléments ajoutés dynamiquement, c'est pourquoi j'utilise 'live', vous devrez peut-être changer selon vos besoins.]

7
shashikant

Bootsrap $(selector).alert('close') ( http://getbootstrap.com/javascript/#alerts ) supprime réellement l'élément d'alerte afin que vous ne puissiez plus l'afficher. Pour implémenter les fonctionnalités souhaitées, il suffit de supprimer l'attribut data-dismiss="alert" de la définition du bouton de fermeture et d'ajouter un petit gestionnaire d'événements pour masquer l'alerte.

<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>
5
Артем Кустиков

J'ai rencontré ce problème également et le problème avec la solution cochée ci-dessus est que j'ai toujours besoin d'accéder aux événements standard de fermeture d'alerte d'amorçage.

Ma solution a été d'écrire un petit plugin jQuery personnalisable qui injecte une alerte Bootstrap 3 correctement formée (avec ou sans bouton de fermeture selon vos besoins) avec un minimum de tracas et vous permettant de la régénérer facilement après la boîte. est fermé.

Voir https://github.com/davesag/jquery-bs3Alert pour l’utilisation, les tests et des exemples.

1
Dave Sag

En fait, les alertes bootstrap sont conçues pour être supprimées plutôt que cachées . Vous pouvez constater qu’en consultant le message d’alerte, il ne contient aucun élément d’emballage . Toute tentative de modification du message d’alerte nécessite donc un code supplémentaire éléments de nœud de texte) . Vous devez redéfinir votre application et créer un nouvel élément .alert chaque fois que vous souhaitez le modifier/l'afficher à nouveau.

0
user3263221

J'ai utilisé l'approche de travail suivante. 

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

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

Corps HTML contient ci-dessous alerte

<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