[Task] Use magento modal alert to display ajax errors

Author: jalogut

templates/ajaxHtml/view/frontend/web/js/ajax/${actionname}.js

@@ -8,9 +8,9 @@
 /*jshint jquery:true*/
 define([
     "jquery",
-    "jquery/ui",
+    'Magento_Ui/js/modal/alert',
     'mage/translate'
-], function ($) {
+], function ($, alert) {
     "use strict";
 
     $.widget('${vendorname}_${modulename}.${actionname}ajax', {
@@ -75,7 +75,13 @@ define([
         },
 
         displayError: function (message) {
-            alert(message);
+            alert({
+                title: $.mage.__('An error occurred'),
+                content: message,
+                actions: {
+                    always: function(){}
+                }
+            });
         }
     });
 

templates/ajaxJson/view/frontend/web/js/ajax/${actionname}.js

@@ -8,9 +8,9 @@
 /*jshint jquery:true*/
 define([
     "jquery",
-    "jquery/ui",
+    'Magento_Ui/js/modal/alert',
     'mage/translate'
-], function ($) {
+], function ($, alert) {
     "use strict";
 
     $.widget('${vendorname}_${modulename}.${actionname}ajax', {
@@ -71,15 +71,22 @@ define([
 
         success: function (response) {
             if (response.success) {
+                // Do something with response.success json
                 alert('Success: ' + response.success);
             }
             if (response.error) {
-                alert('Error: ' + response.error);
+                this.displayError('Error: ' + response.error);
             }
         },
 
         displayError: function (message) {
-            alert(message);
+            alert({
+                title: $.mage.__('An error occurred'),
+                content: message,
+                actions: {
+                    always: function(){}
+                }
+            });
         }
     });
 

templates/ajaxRestApi/view/frontend/web/js/${actionname}.js

@@ -9,9 +9,9 @@
 define([
     "jquery",
     'mage/url',
-    "jquery/ui",
+    'Magento_Ui/js/modal/alert',
     'mage/translate'
-], function ($, url) {
+], function ($, url, alert) {
     "use strict";
 
     $.widget('${vendorname}_${modulename}.${actionname}', {
@@ -72,12 +72,19 @@ define([
         success: function (response) {
             var result = JSON.parse(response);
             if (result.success) {
+                // Do something with result.success api response
                 alert('Success: ' + result.success);
             }
         },
 
         displayError: function (message) {
-            alert(message);
+            alert({
+                title: $.mage.__('An error occurred'),
+                content: message,
+                actions: {
+                    always: function(){}
+                }
+            });
         }
     });