I am new to angularjs and web development in general. I have an ajax request that sends information to the server after a button click. When the request returns success, I want to display a toast notification confirming that the request was sent successfully. However, the toast does not appear, even though there is a console log showing that the request was sent. Why isn't the toast popping up?
Note: The toast does work when placed outside the success function of the ajax call.
Thank you in advance.
Here is my code:
(function() {
'use strict';
angular
.module('app.dashboard')
.controller('NotificationController', NotificationController);
NotificationController.$inject = ['$resource', '$http', '$state','toaster'];
function NotificationController($resource, $http, $state, toaster) {
var vm = this;
activate();
vm.alertSubmit = function() {
console.log(vm.subject);
console.log(vm.htmlContent);
const item = {
'subject':vm.subject,
'body': vm.htmlContent
};
//toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text); If I try this line the toast does appear.
//console.log(item);
//console.log(JSON.stringify(item));
$.ajax({
type: 'POST',
accepts: 'application/json',
url: 'api/pushnotification',
contentType: 'application/json',
data: JSON.stringify(item),
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
toaster.pop(vm.toaster.type, "Failure", "Message wasn't send.");
},
success: function (result) {
console.log(result);
toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
}
});
return false;
};
function activate() {
// the following allow to request array $resource instead of object (default)
$http
.get('api/auth')
.then(function(response) {
// assumes if ok, response is an object with some data, if not, a string with error
// customize according to your api
if (!response.data) {
$state.go('page.login');
}
else
{
var actions = {'get': {method: 'GET', isArray: true}};
vm.toaster = {
type: 'success',
title: 'Success',
text: 'Message was sent successfully.'
};
//vm.pop = function () {
// toaster.pop(vm.toaster.type, vm.toaster.title, vm.toaster.text);
//};
}
}, function() {
$state.go('page.login');
});
console.log("activate func");
}
}
})();