Perform action at end of for loop javascript [duplicate]

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
– Booster2ooo, Commented May 20, 2017 at 9:07
instead of running ajax on inside the foreach . you can make the data as array and porcess everythin in single shot . — JYoThI
– JYoThI, Commented May 20, 2017 at 9:10
@Booster2ooo, thanks for the tip. adding async: false fixed it and now works properly. — Douglas Hosea
– Douglas Hosea, Commented May 20, 2017 at 9: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
– JJJ, Commented May 20, 2017 at 9:16

clinton3141 · Accepted Answer · 2017-05-20 09:23:18Z

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.

Collectives™ on Stack Overflow

Perform action at end of for loop javascript [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related