Créer dynamiquement des messages d'alerte CSS Bootstrap

Question

J'essaie de créer dynamiquement des messages d'alerte à l'aide du plugin jQuery pour Bootstrap CSS. Je veux créer et détruire des alertes sur certains événements (par exemple, succès/erreur AJAX). Voici un extrait de mon code qui ne fonctionne pas :

var alertVisible = false;
function fetchData() {
    function onDataReceived(stats) {
        if (alertVisible) {
            $(".alert-message").alert("close");
        }
        alertVisible = false;
        // Do stuff with data...
    }

    function onError() {
        $(".alert-message").alert();
        alertVisible = true;
    }

    $.ajax({
        dataType: 'json',
        success: onDataReceived,
        error: onError,
        cache: false
    });
};

et voici le HTML correspondant :

<div class="row">
  <div class="alert-message error fade in hide span16" data-alert="alert">
    <a class="close" href="#">&times;</a>
    <p>Lost connection to server.</p>
  </div>
</div>

Mon premier problème est que l'alerte est affichée par défaut. Je peux en quelque sorte résoudre ce problème en utilisant l'option hide classe. Cependant, si vous fermez une alerte (en cliquant sur le bouton de fermeture), la création de nouvelles alertes ne fonctionne plus (je suppose que l'élément DOM a disparu). Comment utiliser les alertes de Bootstrap ?

Answer 1

Cette réponse fait référence à Bootstrap 2.

Lorsqu'une alerte est fermée, elle est supprimée du DOM.

Si vous voulez qu'une alerte réapparaisse plus tard, assurez-vous de no mettre data-dismiss="alert" dans le bouton de fermeture comme suit :

<div class="alert fade in" id="login-error" style="display:none;">
    <button type="button" class="close">×</button>
    Your error message goes here...
</div>

Ensuite, liez le bouton de fermeture pour simplement masquer l'alerte lorsqu'il est pressé :

$('.alert .close').on('click', function(e) {
    $(this).parent().hide();
});

Lorsque vous souhaitez que l'infobulle réapparaisse, il suffit de l'afficher.

$('#login-error').show();

Answer 2

Vous pourriez simplement ajouter dynamiquement les éléments DOM pour l'alerte.

Javascript :

function addAlert(message) {
    $('#alerts').append(
        '<div class="alert">' +
            '<button type="button" class="close" data-dismiss="alert">' +
            '&times;</button>' + message + '</div>');
}

function onError() {
    addAlert('Lost connection to server.');
}

HTML:

<div id="alerts"></div>

Dans le cas d'alertes multiples, cette version entraînera une accumulation d'alertes multiples qui devront être rejetées individuellement par l'utilisateur final. En fonction du nombre d'alertes que vous prévoyez et de l'importance pour l'utilisateur de voir chacune d'entre elles, vous pouvez modifier cette version pour supprimer les anciennes alertes.

En outre, avec un peu de remaniement, vous pouvez étendre ce système pour créer des alertes d'avertissement, d'information et de réussite en plus de cette alerte d'erreur.

Answer 3

Le meilleur moyen que je connaisse :

HTML:

<div class="alert alert-block alert-error fade in" id="cert-error" style="display:none;">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <h4 class="alert-heading">   !</h4>
    <p>  !   : *.cer, *.crt</p>
    <p>
        <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
    </p>
</div>

JS :

$('.alert .close').live("click", function(e) {
    $(this).parent().hide();
});

function showAlert() {
    $(".alert").addClass("in");
    $("#cert-error").show();
}

function closeAlert() {    
    $("#cert-error").hide();
}

Nous pouvons maintenant afficher les notifications à l'aide de showAlert() et les masquer avec closeAlert().

Answer 4

Je pense que vous avez raison. Lors de l'événement 'close' de l'alerte, tous les éléments Dom sur lesquels nous avons cliqué sont détruits. Nous ne pouvons donc pas vérifier la propriété de visibilité pour ces ids.

Je vous suggère donc de ne pas utiliser la classe 'close' ou l'événement close du fichier bootstrap-alerts.js. Il suffit de prendre les classes pour les regarder et d'essayer d'utiliser le traditionnel hide-show ou quelques astuces de Jquery pour accomplir notre tâche.

Answer 5

Modifier la fonction removeElement(). Ligne 59 de bootstrap-alert.js :

Changez :

.remove()

A :

.hide().css('opacity', 1);