Jquery: Flash-сообщения

Ответ 1

Я бы посмотрел доступные плагины jQuery для стиля ворчания, если вы ищете что-то быстрое для реализации:)

.ajaxSuccess() будет хорошим местом для запуска вашего кода или для ошибок .ajaxError(), это некоторые из глобальных обработчиков событий ajax, например:

$(document).ajaxSuccess(function() {
  //fire success message using the plugin of choice, for example using gritter:
  $.gritter.add({ 
    title: 'Save Complete!',
    text: 'Your request completed successfully.'
  });
});

Ответ 2

Я использовал Notify Bar, чтобы сделать это также... На самом деле простой в использовании.

Ответ 3

Никакой плагин не нужен, попробуйте следующее. Он очень похож на тот, что здесь, на stackoverflow. Вы можете просто передать html функции, которую вы хотите видеть

    showFlash: function (message) {
    jQuery('body').prepend('<div id="flash" style="display:none"></div>');
    jQuery('#flash').html(message);
    jQuery('#flash').toggleClass('cssClassHere');
    jQuery('#flash').slideDown('slow');
    jQuery('#flash').click(function () { $('#flash').toggle('highlight') });
},

Ответ 4

Для этого не стоит использовать дополнительный плагин.

Что мы делаем, это добавить диапазон к предопределенному контейнеру или создать абсолютный позиционированный div для успеха ajax и добавить к нему ответное сообщение ajax. Вы можете добавить саморазрушительный javascript или кнопку "Очистить" в этом div, чтобы удалить его из DOM. JQuery имеет хорошие возможности обработки DOM.

Как уже было сказано, вот один грязный пример,

HTML

<div id="message_container" style="display:none">
  <span id="msg"></span>
  <a id="clear_ack" href="#" 
    onclick="$(this).parents('div#message_container').fadeOut(400); return false;">
    clear
  </a>
</div>

JS

var set_message = function(message){
     var container = $('#msg_container');
     $(container).find('span#msg').html(message);
     $(container).show();
}

var set_counter = function(){
    $.ajax({
           type: "POST",
           url: '/some/url/',
           dataType: 'json',
           error: function(response){},
           success: function(response){
              if (responses.message){
                  set_message(responses.message)
              }
           }
       });
};

Ответ 5

Я просто добавил это на свою страницу, отображает индикатор загрузки для каждого вызова ajax (независимо от того, где он находится на странице)

/* Ajax methods */
/* show the message that data is loading on every ajax call */
var loadingMessage = 'Please wait loading data for page...';
$(function()
{
    $("#AjaxStatus")
    .bind("ajaxSend", function()
    {
        $(this).text(loadingMessage);
        $(this).show();
    })
    .bind("ajaxComplete", function()
    {
        $(this).hide();
    });
});

И статус:

<span id="AjaxStatus" class="ui-state-error-text"></span>

ОК, на основе вашего последнего комментария, как об этом варианте сообщения по умолчанию или о сложном:

ShowStatus(true, 'Save Failed with unknown Error', 4000);

/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
    var errorMessage = $("#Errorstatus");
    if (saveMessage)
    {
        errorMessage.show();
        var myInterval = window.setInterval(function()
        {
            message = message + '...';
            errorMessage.text(message);
            errorMessage.show();
        }, 1000);
        window.setTimeout(function()
        {
            clearInterval(myInterval);
            errorMessage.hide();
        }, timeInMilliseconds);
    }
    else
    {
        errorMessage.text(message);
        errorMessage.show();
        window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
    };
};

Снайпер из jquery ajax:

   success: function(msg)
    {
        ShowStatus(true, 'Hey it went well', 4000);
        Process(msg);
    },

  failure: function(msg)
    {
        ShowStatus(true, 'Save Failed with unknown Error', 4000);
    }

Ответ 6

Я считаю, что вы ищете что-то вроде этого: http://projects.zoulcreations.com/jquery/growl/

Ответ 7

В итоге я использовал jquery-notice, что действительно просто и самодостаточно. Он лицензирован MIT, просто zip файл с файлами .js и .css, и вы можете называть его чем-то вроде:

<script type="text/javascript">
  $(document).ready( function () {
    jQuery.noticeAdd({
        text: '${flash_get()}',
        stay: true
        });
    return false;
    });
</script>

Хотя мне также понравилось решение от @Brian ONeal для Notify Bar, это также выглядит очень просто.

jquery-notice делает поле для каждого сообщения в правом верхнем углу страницы. Notify Bar отходит от верхнего края и включает несколько разных стилей для ошибок, регулярных или успешных уведомлений.