I went through existing questions regarding this topic but I was not able to find a solution for my case. I am new to javascript, jquery. I have this code
let form = angular.element('form'); form.attr('action', url); form.attr('method', 'get'); form.attr('name', filename); if (fieldName != null) { $('<input type="hidden" name = "field" value = "' + fieldName + '"/>').appendTo(form); } form.trigger('submit');
the url is an api call. This performs download of a file. I am trying to handle if there is an error for which I tried using ajax, jquery
let form = angular.element('form'); form.submit(function(){ $.ajax({ async: false, url: url, type: 'GET', cache: false, success: function(resp) { }, error: function(error) { toaster.error(error.responseText); } }); }); form.trigger('submit');
this creates multiple(three in my case) toasters. and every subsequent error will just double the number of toasters. if I pass the url and type as form.attr() the error: block code does not get represented on the screen. How do I display the toaster on the screen or make the ajax call execute once? I am not using anchor element to download because it is causing some other problems. so using form.