Perform action at end of for loop javascript

Question

I have been trying to redirect a page after the for loop has finished but it executes it before the for loop even if the code is outside the for loop. So am wondering if there is some way of executing code and redirecting to another page after the for loop is done in JavaScript. This is my code.

$('#submit').click(function(e) {
   e.preventDefault();
   var total = $('#total').val();

   for (var i = 0; i < total; i++) {
     if ($('#check_' + i).is(':checked')) {
       // The string to be posted to the submit file
       var dataString = 'month=' + month + '&year=' + year + '&patient_id=' + patient_id;

       // AJAX code to submit form.
       $.ajax({
         type: "POST",
         url: "pages/views/payroll/bulk_payroll_functions.php",
         data: dataString,
         cache: false,
         success: function(result) {
           alert("good");
         }
       });
     }
   }
   alert("All members payrolls made");
   window.location = ("index.php?lang=en&page=view_payroll");
})

$.ajax is async, it's not blocking your look. Quick, easy, dirty fix is to add the option `async: false`. The proper solution is to recode this sample handling the asynchronicity. — Booster2ooo, May 20 '17 at 09:07
instead of running ajax on inside the foreach . you can make the data as array and porcess everythin in single shot . — JYoThI, May 20 '17 at 09:10
@Booster2ooo, thanks for the tip. adding async: false fixed it and now works properly. — Douglas Hosea, May 20 '17 at 09:13
`async: false` is deprecated and should never be used. It's "fixed" now but you're blocking the UI and it might break the code in the future. — JJJ, May 20 '17 at 09:16

clinton3141 · Accepted Answer · 2017-05-20T09:23:18.477

The code is working as you're expecting - the AJAX requests are being made. However, because they are asynchronous, you are not guaranteed that they'll have finished before you redirect.

The cleanest way to do this would be to use the Promises which $.ajax returns.

You can then use $.when to redirect when all ajax requests are completed:

$('#submit').click( function(e) {
  e.preventDefault();

  // array to store the promises
  var promises = [];

  var total = $('#total').val();

  for(var i = 0; i < total; i++){
    if($('#check_' + i).is(':checked')){
      // The string to be posted to the submit file
      var dataString = 'month=' + month + '&year=' + year + '&patient_id=' + patient_id ;

      // AJAX code to submit form.
      promise = $.ajax({
        type: "POST",
        url: "pages/views/payroll/bulk_payroll_functions.php",
        data: dataString,
        cache: false,
        success: function (result) {
          alert("good");
        }
      });

      // add ajax request to the promises
      promises.push(promise);
    }
  }

  // redirect when all promises have resolved
  $.when(promises).then(function () {
    alert("All members payrolls made");
    window.location = ("index.php?lang=en&page=view_payroll");
  });
});

I'd just advice to use native Promises rather than the jQuery implementation. — Booster2ooo, May 20 '17 at 09:17

Perform action at end of for loop javascript

1 Answers1