Подтвердить что ты не робот

Динамическое создание сообщений загрузки Bootstrap CSS

Я пытаюсь динамически создавать предупреждающие сообщения, используя плагин jQuery для Bootstrap CSS. Я хочу создавать и уничтожать предупреждения на определенных событиях (например, успех/ошибка AJAX). Здесь неработающий фрагмент кода:

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

и здесь соответствующий HTML:

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

Моя первая проблема заключается в том, что предупреждение отображается по умолчанию. Я могу решить эту проблему с помощью класса hide. Однако, если вы закроете предупреждение (нажав кнопку закрытия), то создание новых утверждений больше не будет работать (я думаю, элемент DOM исчез). Как вы должны использовать оповещения Bootstrap?

4b9b3361

ОТВЕТЫ

Ответ 1

Этот ответ относится к Bootstrap 2.

Когда предупреждение закрыто, оно удаляется из DOM.

Если вы хотите, чтобы предупреждение появлялось позже, убедитесь, что не ставьте data-dismiss="alert" в кнопку закрытия следующим образом:

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

Затем привяжите кнопку закрытия, чтобы просто скрыть предупреждение при нажатии:

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

Когда вы хотите, чтобы всплывающая подсказка снова появлялась, просто покажите ее.

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

Ответ 2

Вы можете просто динамически добавлять элементы DOM для предупреждения.

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>

В случае нескольких предупреждений эта версия приведет к накоплению нескольких предупреждений, которые конечный пользователь должен индивидуально отклонить. В зависимости от того, сколько уведомлений вы ожидаете и насколько важно, чтобы пользователь видел их, вы можете изменить это, чтобы удалить старые предупреждения.

Кроме того, с небольшим рефакторингом вы можете расширить его, чтобы создать предупреждения об ошибках, информации и успеха в дополнение к этому сообщению об ошибке.

Ответ 3

Лучший способ, которым я знаю:

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

Теперь мы можем отображать уведомления с помощью showAlert() и скрыть их с помощью closeAlert().

Ответ 4

Я взял ответ Eamonn и немного улучшил его, добавив необязательный type и closeDelay, так что вы можете, например, добавить предупреждение об danger типа, которое автоматически закроется через 5 секунд, например:

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

Для этого добавьте следующую функцию JavaScript:

function showAlert(message, type, closeDelay) {

    var $cont = $("#alerts-container");

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

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

    // create the alert div
    var alert = $('<div>')
        .addClass("fade in show alert alert-" + type)
        .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
    $cont.prepend(alert);

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

Ответ 5

Я думаю, что ты прав. В "закрытом" событии предупреждения все элементы Dom уничтожаются, на которые мы нажимаем. поэтому мы не можем проверить свойство видимости для этих идентификаторов.

Итак, мое предложение "не использовать" закрыть "класс или закрыть событие bootstrap-alerts.js. Просто найдите там классы для поиска и попробуйте использовать традиционное скрытое шоу или некоторые трюки jquery, чтобы наша работа работала.

Ответ 6

Измените функцию removeElement(). Строка 59 из bootstrap-alert.js:

Изменить:

.remove()

To:

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

Ответ 7

Вы можете рассмотреть реализацию библиотеки Toastr (https://github.com/CodeSeven/toastr от John Papa). Toastr предоставляет вам необходимые функции оповещения с помощью встроенных триггеров событий DOM или вы можете отображать уведомление на странице Load. Стоит исследовать.