Сообщение My Bootstrap не будет отображаться после закрытия

Привет У меня есть следующее предупреждение, которое скрыто на странице

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

Я показываю его со следующим javascript

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

Это, очевидно, связано с кнопкой в ​​моем html.

После того, как появится предупреждение, если я закрою его с помощью <button type="button" class="close" data-dismiss="alert">&times;</button> В следующий раз, когда я нажму кнопку, чтобы открыть предупреждение, я вижу, что на моем экране отладки отображается $('#selectCodeNotificationArea').show();, но предупреждение не отображается снова.

Кто-нибудь испытал это раньше?

Ответы

Ответ 1

Data-reject completeley удаляет элемент. Вам нужно будет скрыть предупреждение, если вы собираетесь его снова показывать.

Например:

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

и это JS

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

Ответ 2

Лучше всего удалить, data-dismiss="alert" из вашего тега и использовать имя класса, т.е. закрыть, чтобы скрыть и показать сообщение об ошибке/предупреждении.

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

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

[Я работаю над динамически добавленными элементами, поэтому я использую "live", вам, возможно, придется изменить в соответствии с вашими требованиями.]

Ответ 3

Bootsrap $(selector).alert('close') (http://getbootstrap.com/javascript/#alerts) фактически удаляет элемент предупреждения, поэтому вы не можете его снова отобразить. Чтобы реализовать желаемую функциональность, просто удалите атрибут data-dismiss="alert" из-за закрытия кнопки закрытия и добавьте небольшой обработчик событий, чтобы скрыть предупреждение

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

Ответ 4

Я столкнулся с этой проблемой, и проблема с отмеченным выше решением заключается в том, что мне по-прежнему нужен доступ к стандартным событиям бутстрапа-предупреждения-закрытия.

Моим решением было написать небольшой маленький настраиваемый плагин jquery, который вводит правильно сформированное предупреждение Bootstrap 3 (с кнопкой или без кнопки закрытия, поскольку вы нуждайтесь в ней) с минимумом суеты и позволяет легко восстановить его после закрытия коробки.

См. https://github.com/davesag/jquery-bs3Alert для использования, тестов и примеров.

Ответ 5

Фактически бутстрап-предупреждение предназначено для удаления, а не скрытия. Вы можете сказать, что, посмотрев на предупреждающее сообщение, у него нет никакого элемента упаковки. Поэтому любая попытка изменить сообщение оповещения требует дополнительного кода (поиск текста node элементов). Вы должны перепроектировать свое приложение и создать новый .alert-элемент каждый раз, когда вы захотите его изменить/показать снова.