notiflix / Notiflix

Notiflix is a pure JavaScript library for client-side non-blocking notifications, popup boxes, loading indicators, and more that makes your web projects much better.
https://notiflix.github.io
MIT License
635 stars 55 forks source link

SOLVED: Cannot auto remove Notify.Info when multiple Notifys poping up at the same time. #7

Closed fm-chen closed 4 years ago

fm-chen commented 4 years ago

Hi there,

When I showing Notify.info within a loop, I keep getting errors saying:

Uncaught TypeError: Cannot read property 'removeChild' of null
    at removeNotifyElmentsAndWrapper (VM39888 notiflix-aio-1.9.1.js:1129)
    at VM39888 notiflix-aio-1.9.1.js:1152

My JS Code:

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

$(document).on('knack-view-render.view_65', function(event, scene) {

  LazyLoad.js(['https://dl.dropbox.com/s/vj6guwl2a8b0wze/notiflix-aio-1.9.1.min.js?','https://dl.dropboxusercontent.com/s/d0bepdjq0bonnqj/notiflix-aio-1.9.1.js','https://dl.dropboxusercontent.com/s/bwanjv361aifmls/papaparse.min.js','https://dl.dropboxusercontent.com/s/2onm4emhos577sf/papaparse.js'], function () {
      var para = document.createElement("input");
      para.setAttribute("type", "file");
      para.setAttribute("name", "File Upload");
      para.setAttribute("id", "txtFileUpload");
      para.setAttribute("accept", ".csv");
      var element = document.getElementById("view_65");
      var celement = element.childNodes[0];
      if (document.getElementById("txtFileUpload")){
        }else{insertAfter(para, celement)};

      document.getElementById('txtFileUpload').addEventListener('change', upload, false);

       function upload(evt) {
       var txt;

       Notiflix.Confirm.Show(
        'Upload file:',
        evt.target.value,
        'Yes, upload',
        'No, cancel',
        // ok button callback
        function(){
         // codes...
         Notiflix.Loading.Standard('Loading...');
         var data = null;
         var file = evt.target.files[0];
         var reader = new FileReader();
         reader.readAsText(file);
         reader.onload = function(event) {
         var csvData = event.target.result;

         var payload = null;
         var i = 0;
         var j = 0;

         Papa.parse(csvData, {
         //download: true,
         header: true,
         step: function(row) {
            payload = '{ "field_17": "' + row.data['Record ID'] + 
              '" ,"field_18": "' + row.data.Date + 
              '" ,"field_19": "' + row.data['Clock In Time'] + 
              '" ,"field_20": "' + row.data['Clock out Time'] + 
              '" ,"field_22": "' + row.data.Employee + 
              '" ,"field_23": "' + row.data['Timer Number'] + 
              '" }';
            j = j + 1;
            $.ajax({
            url: "https://api.knack.com/v1/pages/scene_32/views/view_65/records",
            type: "POST",
            //async: false,
            headers: {'X-Knack-Application-Id':'*****','X-Knack-REST-API-KEY':'*****','content-type':'application/json'},
            data: payload,
            complete:function(data) { 
                Knack.views["view_65"].model.fetch();
                if (i == j){
                  Notiflix.Loading.Remove();
                  Notiflix.Report.Success(
                    'Upload Success',
                    j + ' rows have been successfully uploaded!',
                    'Click');;
                };
            }, 
            success: function(response) {
                i = i + 1;  
            Notiflix.Notify.Info('Uploading Row: '+ i);
            }
            });
         },
         complete: function() { }
         });
         };
         reader.onerror = function() {
         Notiflix.Report.Failure('Unable to read ' + file.fileName);
         };
        },
        function(){
          Notiflix.Report.Failure("You pressed Cancel!");
        }
      );
      }
  });
});
fm-chen commented 4 years ago

Sorry for any confusion. The problem is because I refresh the page before the pop-ups being removed.

furcan commented 4 years ago

Hi,

Firstly thanks for using Notiflix.

CSS transitions and animations (fade, zoom etc.) causes a delay to remove Notiflix components.

e.g. option in Notiflix Notify Module: "cssAnimationDuration:400;"

Like you said; if you need to refresh or take any action on your page, may be you can use Notiflix components without animations.

Thanks.