Javascript execute alert after all events are finished (POST request, Papaparse, Jquery Datatable Insertion)

Question

I'm using Papaparse, and I'm executing this code. I have a counter (errorcounter) that counts how many errors are returned from an asynchronous post request. Problem is that I need to get the value of the errorcounter, and I'm testing it via alert.

I think the alert executes before the post requests of before the parsing completes. How do I execute the alert after all these execution happens: (parsing, sending post request, and displaying results in Jquery datatables.

function verifyImportComputer() {
  var errorcounter = 0;
  resetImportComputer();
  $('input[id=importFileComputer]').parse({
     config: {
        header: true,
        skipEmptyLines: true,
        step: function(results) {
           $('#importErrorCounter').html(errorcounter);
           $.each(results.data, function(index, data) {
              $.post('com/import/getcomputerimport.cfm', {importData: JSON.stringify(data)}, function(data) {
                 var dataReturn =  $.parseJSON(data);
                 var status = "";
                 jQuery.each(dataReturn.error, function() {
                    status+= "<div class='alert alert-danger'>"+this+"</div>";
                    errorcounter++;
                 });
                 ImportComputerTable.row.add([
                    dataReturn.asset_id,
                    dataReturn.asset_tag,
                    dataReturn.computer_type,
                    dataReturn.computer_name,
                    dataReturn.ip_address,
                    dataReturn.processor,
                    dataReturn.memory,
                    dataReturn.operating_system,
                    dataReturn.office,
                    dataReturn.graphics_card,
                    dataReturn.date_issued,
                    dataReturn.remarks,
                    dataReturn.is_active,
                    status
                 ]).draw(false);
                 $('#importErrorCounter').html(errorcounter);
              });
           });
        }
     }
  }); 
alert(errorcounter);
}

EDIT

I made something like this since someone posted about having callback, but nothing happens.

function verifyImportComputer() {
    errorcounter = 0;
    resetImportComputer();
    $('input[id=importFileComputer]').parse({
      config: {
         header: true,
         skipEmptyLines: true,
         step: function(results) {
            $('#importErrorCounter').html(errorcounter);
            $.each(results.data, function(index, data) {
               $.post('com/import/getcomputerimport.cfm', {importData: JSON.stringify(data)}, function(data) {
                  var dataReturn =  $.parseJSON(data);
                  var status = "";
                  jQuery.each(dataReturn.error, function() {
                     status+= "<div class='alert alert-danger'>"+this+"</div>";
                     errorcounter++;
                  });
                  ImportComputerTable.row.add([
                     dataReturn.asset_id,
                     dataReturn.asset_tag,
                     dataReturn.computer_type,
                     dataReturn.computer_name,
                     dataReturn.ip_address,
                     dataReturn.processor,
                     dataReturn.memory,
                     dataReturn.operating_system,
                     dataReturn.office,
                     dataReturn.graphics_card,
                     dataReturn.date_issued,
                     dataReturn.remarks,
                     dataReturn.is_active,
                     status
                  ]).draw(false);
                  $('#importErrorCounter').html(errorcounter);
               });
            });
         }
      }
    }, {
      function() {
         alert("haha");
         alert(errorcounter);
      }
    }); 
}

Since file parsing is asynchronous, you need to use callback something like `Papa.parse(fileInput.files[0], { complete: function(results) { console.log(results); } }); ` `complete` is callback function — Curiousdev, Jun 06 '17 at 07:18

score 0 · Answer 1 · answered Jun 06 '17 at 09:40

According to the documentation this should work (not tested it though so it might not - perhaps work up a JSFiddle):

function verifyImportComputer() {
    errorcounter = 0;
    resetImportComputer();
    $('input[id=importFileComputer]').parse({
            config: {
                header: true,
                skipEmptyLines: true,
                step: function(results) {
                    $('#importErrorCounter').html(errorcounter);
                    $.each(results.data, function(index, data) {
                        $.post('com/import/getcomputerimport.cfm', {
                            importData: JSON.stringify(data)
                        }, function(data) {
                            var dataReturn = $.parseJSON(data);
                            var status = "";
                            jQuery.each(dataReturn.error, function() {
                                status += "<div class='alert alert-danger'>" + this + "</div>";
                                errorcounter++;
                            });
                            ImportComputerTable.row.add([
                                dataReturn.asset_id,
                                dataReturn.asset_tag,
                                dataReturn.computer_type,
                                dataReturn.computer_name,
                                dataReturn.ip_address,
                                dataReturn.processor,
                                dataReturn.memory,
                                dataReturn.operating_system,
                                dataReturn.office,
                                dataReturn.graphics_card,
                                dataReturn.date_issued,
                                dataReturn.remarks,
                                dataReturn.is_active,
                                status
                            ]).draw(false);
                            $('#importErrorCounter').html(errorcounter);
                        });
                    });
                }
            }
        },
        complete: function() {
            function() {
                alert("haha");
                alert(errorcounter);
            }
        }
    );
}

I think I'd be inclined to add the rows all in one go rather than during each step...

It doesn't work. I figured out how to do it. add a .done chain function for every async post request and then alert the errorcounter. — Kay Singian, Jun 07 '17 at 08:01

Javascript execute alert after all events are finished (POST request, Papaparse, Jquery Datatable Insertion)

1 Answers1