Inside Ajax make Ajax loop

Question

What I am trying to do is:

First Ajax is uploading csv file and gets all the products list. Then on success it goes through loop and calls another ajax which uploads these products.

Problem:

When it goes through loop it freezes browser and waits till every product will be uploaded and then it prints out the ID's.

What I need:

To get rid of freezing browser and when it could print every ID after every product has been uploaded.

Code:

var data = new FormData();
        data.append('file', jQuery('#item_data')[0].files[0]);
        data.append('action', 'csv_upload');
        jQuery.ajax({
            url: ajaxurl,
            data: data,
            timeout: 3000,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                jQuery( ".wrap .all" ).html(data.information.length);
                jQuery.each(data.information, function (i, elem) {
                    add_item(elem, i);
                });
                jQuery( "#results" ).append( "<p style='color:green;'>The end!</p>" );
            }
        });

    function add_item(elem, i){
        var data = new FormData();
        data.append('action', 'product_upload');
        data.append('file_cont', JSON.stringify(elem));
        jQuery.ajax({
            async: false,
            url: ajaxurl,
            data: data,
            type: 'POST',
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                jQuery( "#results" ).append( "<span>"+ data.message +"</span>" );
            }
        });
        jQuery( ".wrap .count" ).html(i+1);
     }

andys · Accepted Answer · 2019-10-03 12:01:32Z

2

var data = new FormData();
data.append('file', jQuery('#item_data')[0].files[0]);
data.append('action', 'csv_upload');
jQuery.ajax({
  url: ajaxurl,
  data: data,
  timeout: 3000,
  cache: false,
  contentType: false,
  processData: false,
  type: 'POST',
  dataType: 'json',
  success: function(data) {
    jQuery(".wrap .all").html(data.information.length);
    add_item(data.information, data.information[0], 0);
  }
});



function add_item(info, elem, i ) {
  var
    data = new FormData();
  data.append('action', 'product_upload');
  data.append('file_cont', JSON.stringify(elem));
  jQuery.ajax({
    url: ajaxurl,
    data: data,
    type: 'POST',
    processData: false,
    contentType: false,
    dataType: 'json',
    success: function(response) {
      if (info.length >= i + 1) {
        jQuery("#results").append("<span>" + data.message + "</span>");
        add_item(info, info[i + 1], i + 1);
        jQuery(".wrap .count").html(i + 1);
      }
    }
  });
  if(info.length == i){
            jQuery( "#results" ).append( "<p style='color:green;'>The End!</p>" );
        }
}

you can do it recursively, since setting async: false will wait for the request to finish before the next instruction is executed.

UPDATE: removed async: false, and added with "The End" message correction.

edited Oct 3, 2019 at 12:01

andys

7084 gold badges13 silver badges30 bronze badges

answered Oct 3, 2019 at 10:01

Nijeesh Joshy

1,4812 gold badges15 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

andys Over a year ago

Thanks Nijeesh for reply, but thats why I added async: false to add_item, because this function uploads only 1 product, because this function is inside the loop.

Nijeesh Joshy Over a year ago

if you add async: false the browser is gonna freeze till the request is resolved. if you dont want that to happen you can make the success callback of your add_item ajax call to call the next iteration of the each loop. like a recursive function

andys Over a year ago

Thanks for full explanation, could you guide me how to make it ? or show any example? thank you!

Nijeesh Joshy Over a year ago

i have made a very crude version with setTimeout maybe this will clear things up for you jsfiddle.net/nijeesh4all/9cks24mq

andys Over a year ago

so your code just waits for some time and after that it executes cb() function? I think this not the right answer, because there is no ajax, just waiting for some time and then it executes... What I was thinking is to get some response and execute another item. Is there any smarter way to do this?

|

Collectives™ on Stack Overflow

Inside Ajax make Ajax loop

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related