4

私はjquery toastrを使用しています。これまでのところ、すべてが素晴らしいです。トーストを表示して閉じることができます。各トーストを一意に識別できるようにしたい。そして、その一意の識別子を onHidden 関数で使用します。誰もこれを以前にやったことがありますか？閉じたトーストを囲む toastr クラスまたは div の close イベントで jquery を呼び出すためのより良いオプションはありますか? 

    var mes = 'My name is Inigo Montoya.<input type="hidden" id="announcementId" value="1"/>' +
       '<input type="hidden" id="userId" value="'+ userid +'"/> ';

    var mes1 = 'Princess Bride<input type="hidden" id="announcementId2" value="2"/>'+
       '<input type="hidden" id="userId1" value="'+ userid +'"/> ';

    var mes2 = 'Man in Black<input type="hidden" id="announcementId2" value="3"/>'+
       '<input type="hidden" id="userId2" value="'+ userid +'"/> ';

   var mes3 = 'Inconcivable!<input type="hidden" id="announcementId3" value="4"/>'+
       '<input type="hidden" id="userId3" value="'+ userid +'"/> ';

toastr.options = {
  "closeButton": false,
  "debug": false,
  "positionClass": "toast-top-full-width",
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "0",
  "extendedTimeOut": "0",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

toastr.options.onHidden = function(item) { 
//GET UNIQUE TOAST ID'S HERE
        var val = 1;//$this.find("#announcemntId").val();
        alert("CLOSED " + item); 
}

toastr.error(mes, "First Toast");
toastr.error(mes1, "Second Toast");
toastr.error(mes2, "Third Toast");
toastr.error(mes3, "Fourth Toast");
4

3 に答える 3

8

オプションのオーバーライドである 3 番目のパラメータを渡すことができます

toastr.error('Some error', 'Error', { onHidden: function() {
         console.log('Error toast hidden.')
}});

またはグローバル onHidden を変更します

var onHiddenToast = function () { 
        console.log("onHidden");
}
toastr.options.onHidden = onHiddenToast;

また、それを参照するだけでトーストを取得できます

var myToast = toastr.info("Some info");
//do what you want with myToast
于 2014-09-15T07:06:26.273 に答える
0

後で誰かがこれに出くわした場合に備えて、これが私の解決策でした。json から読み込まれたトースト。各トーストは独自の div (情報、エラー、警告、成功) 内にあり、それぞれにクラスが割り当てられています。トーストの各メッセージに、必要な値を含む隠し属性を割り当てました。

$.ajax({
    dataType: "json",
    url: '/announcements/getannouncements/userid/' + userid,
    success: function (data) {
        $.each(data, function (i, val) {
            var mes = '<input type="hidden" id="userId" value="' + userid + '"/>' +
                '<input type="hidden" id="announcementId" value="' + val.id + '"/>' +
                'Client:  ' + val.client + '</br>' + val.announcement;
            var title = val.title;
            toastr.error(mes, title); //info, success, warning, error
        });
    },
    error: function () {
        alert("Could not get announcments");
    }
});

トーストを閉じるには div をクリックすると発生するので、クリックされた div クラスをキャプチャし、アナウンスとユーザー ID を見つけてロジックを実行します

//class could be warning, error, info, success : we only use error
$(".toast-error").live('click', function () {
    var userId = $(this).find("#userId").val();
    var announcementId = $(this).find("#announcementId").val();
    var url = '/announcements/acknowledge/userid/' + userId + '/announceid/' + announcementId;
    // ajax call to the controller to write the timestamp of the user clicking the toast announcement
    $.ajax({
        dataType: "json",
        url: url,
        success: function (data) {
            if (data == '1') {
                alert("Successfully acknowledged");
            }
            else {
                alert("Data error");
            }
        },
        error: function () {
        }
    });
});
于 2014-09-15T05:49:48.973 に答える
0

私はこれらの答えをよく理解していなかったので、自分の答えを追加しています。jquery を使用して onclose 関数を作成しました (誰かが toast-close ボタンをクリックしたとき)。

$('.toast-close-button').click(function() {
*someCodeHere 
});
于 2019-05-29T16:24:37.757 に答える