JQuery, как использовать плагин ноти в функции AJAX

Я хотел бы использовать плагин Noty для отображения сообщений во время вызовов AJAX. Для этого мне пришлось открыть два уведомительных окна, одно в beforeSend и одно в случае успешного обратного вызова.

$('#insert').on('click', function() {
    $.ajax({
        type: "POST",
        url: action.php,
        beforeSend: function() {
            callNoty('Waiting...');
        },
        success: function(data) {
            callNoty('Insert ok');
        }
    });
});

JS

$(function() {
    callNoty(text) {
        var n = noty({
            layout: 'center',
            theme: 'relax',
            type: 'success',
            text: text,
            dismissQueue: true, // If you want to use queue feature set this true
            template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
            animation: {
                open: { height: 'toggle' }, // or Animate.css class names like: 'animated bounceInLeft'
                close: { height: 'toggle' }, // or Animate.css class names like: 'animated bounceOutLeft'
                //easing: 'swing',
                speed: 0 // opening & closing animation speed
            },
            timeout: 3000, // delay for closing event. Set false for sticky notifications
            force: false, // adds notification to the beginning of queue when set to true
            modal: true,
            maxVisible: 2, // you can set max visible notification for dismissQueue true option,
            killer: true, // for close all notifications before show
            closeWith: ['click', 'hover'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
            callback: {
                onShow: function() {},
                afterShow: function() {},
                onClose: function() {},
                afterClose: function() {},
                onCloseClick: function() {},
            },
            buttons: false // an array of buttons
        });
    };
});

Я прочитал, что вы можете редактировать текст и вводить на лету, и я бы сделал это, чтобы открыть окно уведомлений на beforeSend и изменить тип и текст в случае успешного обратного вызова. Как я мог это сделать? Спасибо

1 ответ

Думаю, я опоздал на пять лет, но вы можете сделать это следующим образом: вы должны иметь файлы noty.js, связанные с корневой папкой html. Сосредоточьтесь на обработчиках успешного выполнения и ошибок

                  $.ajax({
                url : "/posts/create",
                method:"POST",
                data: newPostForm.serialize(), 
                success : function(data){
                    
                   new Noty({
                    theme : 'mint' , 
                    text: "Post Created",
                    type: 'alert',
                    layout : "topCenter",
                    timeout : 1500
                    
                    }).show();
                    
                   
                },
                error: function(error){
                    console.log(error.responseText);
                    new Noty({
                        theme : 'mint' , 
                        text: error.responseText,
                        type: 'alert',
                        layout : "topCenter",
                        timeout : 1500
                        
                        }).show();
                }
            });

Поэтому мы просто вызываем новую функцию Noty в функции обработки успеха или ошибки вызова aja с настройкой и сообщением, которое вы хотите отобразить.

Другие вопросы по тегам