javascript - tooltips bootstrap

Creando dinámicamente mensajes de alerta CSS de Bootstrap.

Question

Estoy tratando de crear dinámicamente mensajes de alerta usando el complemento jQuery para Bootstrap CSS. Quiero crear y destruir alertas en ciertos eventos (por ejemplo, éxito / error de AJAX). Aquí hay un fragmento de mi código que no funciona:

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

y aquí está el HTML correspondiente:

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

Mi primer problema es que la alerta se muestra de forma predeterminada. Puedo resolver esto un poco usando la clase hide . Sin embargo, si cierra una alerta (haciendo clic en el botón de cerrar), entonces la creación de nuevas afirmaciones ya no funciona (supongo que el elemento DOM se ha ido). ¿Cómo se supone que debes usar las alertas de Bootstrap?

Answer 1

Cambiar la función removeElement (). Línea 59 desde bootstrap-alert.js:

Cambio:

.remove()

A:

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

Answer 2

Creo que es correcto. En el evento ''cerrado'' de la alerta, se destruyen todos los elementos de Dom en los que tenemos clic. por lo que no podemos comprobar la propiedad de visibilidad para esos identificadores.

Así que mi sugerencia es ''no usar'' clase ''cerrada'' o evento cerrado de bootstrap-alerts.js. Simplemente llegue a las clases para ver e intente usar el ocultamiento tradicional o algunos trucos de jQuery para que nuestra tarea funcione.

Answer 3

Esta respuesta se refiere a Bootstrap 2.

Cuando se cierra una alerta, se elimina del DOM.

Si desea que vuelva a aparecer una alerta más adelante, asegúrese de no poner data-dismiss="alert" en el botón de cierre de la siguiente manera:

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

Luego, enlace el botón de cerrar para simplemente ocultar la alerta cuando se presiona:

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

Cuando desee que vuelva a aparecer la información sobre herramientas, simplemente muéstrela.

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

Answer 4

La mejor manera que conozco:

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

Ahora podemos mostrar notificaciones usando showAlert () y ocultarlas con closeAlert ().

Answer 5

Podría considerar una implementación de la biblioteca Toastr ( https://github.com/CodeSeven/toastr por John Papa). Toastr le brinda la funcionalidad de alerta que necesita con los activadores de eventos DOM nativos o puede mostrar una notificación en PageLoad. Vale la pena investigar.

Answer 6

Tomé la respuesta de Eamonn y la mejoré un poco, agregando un type opcional y closeDealy , para que pueda, por ejemplo, agregar una alerta de danger de tipo que se cerrará automáticamente después de 5 segundos, así:

showAlert("Warning message", "danger", 5000);

Para lograrlo, agregue la siguiente función de Javascript:

function showAlert(message, type, closeDelay) {

    if ($("#alerts-container").length == 0) {
        // alerts-container does not exist, create it
        $("body")
            .append( $(''<div id="alerts-container" style="position: fixed;
                width: 50%; left: 25%; top: 10%;">'') );
    }

    // default to alert-info; other options include success, warning, danger
    type = type || "info";    

    // create the alert div
    var alert = $(''<div class="alert alert-'' + type + '' fade in">'')
        .append(
            $(''<button type="button" class="close" data-dismiss="alert">'')
            .append("&times;")
        )
        .append(message);

    // add the alert div to top of alerts-container, use append() to add to bottom
    $("#alerts-container").prepend(alert);

    // if closeDelay was passed - set a timeout to close the alert
    if (closeDelay)
        window.setTimeout(function() { alert.alert("close") }, closeDelay);     
}

Answer 7

Usted podría simplemente agregar dinámicamente los elementos DOM para la alerta.

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>

En el caso de alertas múltiples, esta versión resultará en la acumulación de múltiples alertas que el usuario final debe descartar individualmente. Dependiendo de cuántas alertas espere y qué tan importante es para el usuario ver cada una, es posible que desee modificarla para eliminar las alertas antiguas.

Además, con un poco de refactorización puede extender esto para crear alertas de advertencia, información y éxito, además de esta alerta de error.