web-dev-qa-db-ja.com

jquery：フラッシュメッセージ

JQueryを使用して、ページの上部に簡単な方法でフラッシュメッセージを表示するにはどうすればよいですか？何かが組み込まれている、またはプラグインがありますか、それとも自分でそれを行うのに十分簡単ですか？

私が言いたいのは、ajaxの投稿が成功した後、邪魔にならないように「ねえ、うまくいった」と言いたいということです。

jquerymessagebox
18
Svish

jQueryのgrowlスタイルのプラグインが利用可能 実装が簡単なものを探している場合はチェックしてみます:)

.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.'
  });
});
6
Nick Craver

私はこれを行うために 通知バー を使用しました...本当に簡単に使用できます。

12
Brian ONeil

プラグインは必要ありません。次のことを試してください。これは、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') });
},
6
runxc1 Bret Ferrier

それを行うために追加のプラグインを使用する価値はありません。

私たちが行うことは、事前定義されたコンテナーにスパンを追加するまたは絶対位置のdivを作成する ajaxが成功したときにajax応答メッセージを追加することです。さらに、そのdivに自己破壊的なJavaScriptまたは[クリア]ボタンを追加して、DOMから削除することができます。 JQueryには優れたDOM処理機能があります。

尋ねられたように、ここに1つの汚い例があります、

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

これをページに追加したところ、各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>

OK、あなたの最新のコメントに基づいて、このオプションのデフォルトメッセージ、または複雑なものはどうですか？

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);
    }
1
Mark Schultheiss

私はあなたがこのようなものを探していると信じています： http://projects.zoulcreations.com/jquery/growl/

0
jigfox

最終的に jquery-notice を使用しました。これは、非常にシンプルで自己完結型です。 MITライセンスが付与されており、.jsファイルと.cssファイルを含むZipファイルであり、次のように呼び出すことができます。

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

@Brian ONealの Notify Bar のソリューションも気に入りましたが、これも非常に単純に見えます。

jquery-noticeは、ページの右上隅にメッセージごとにボックスを作成します。通知バーは上部のエッジからプルダウンされ、エラー、通常、または成功の通知用のいくつかの異なるスタイルが含まれています。

0
Sean Reifschneider