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 с настройкой и сообщением, которое вы хотите отобразить.