I need to execute som code after a jQuery .each

I have tried just to wirte it after the each loop, but then it executes immediately. I have tried with .promise().done, but that gives me an error that promise() is not a function.

My code

$("#loader").show();
            var url = $(this).attr("action");
            var formData = new FormData($(this)[0]);
            $(this).hide(); 
            $.ajax({
                url: "generateJson.php",
                type: 'POST',
                data: formData,
                async: true,
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                success: function (data, status)
                {
                    $('#json').append(data); //content loads here

                },
                error: function (xhr, desc, err)
                {
                    console.log("error");
                }
            }).done(function( data ) {
                data = JSON.parse( $("#json").val() );
                //console.log(data.length);
                $.each( data, function( key, val ) {
                    console.log(val);
                    //$("#result").append(val);
                    $.ajax({
                        type: "POST",
                        url: "/generateInvoice.php",
                        dataType: "html",
                        data: val,
                        success: function (data, status) {
                            //console.log(data);
                            if (data) {
                                $("#result").append(data)
                            //  console.log("Hurray");
                            } else {
                                console.log("Error");
                            }
                        },
                        error: function (xhr, desc, err)
                        {
                            console.log("error: "   desc   " "   err);
                        }
                    });
                }).promise().done(function(){
                    $("#loader").hide();
                    $("#done").show();
                });
                
                
            });

CodePudding user response：

You are using .success and .done, so I removed one. No need for both. Also, to make this easier to read/troubleshoot I moved the post-ajax code to it's own function. I wasn't sure why you were writing to a div and then reading it back, so I left that but commented it out. Finally, I added a simple counter to iterate the subsequent ajax calls you were making so it could detect when everything was finished. I stole that idea from this post.

$("#loader").show();
var url = $(this).attr("action");
var formData = new FormData($(this)[0]);
$(this).hide();
$.ajax({
    url: "generateJson.php",
    type: 'POST',
    data: formData,
    async: true,
    cache: false,
    contentType: false,
    enctype: 'multipart/form-data',
    processData: false,
    error: function(xhr, desc, err) {
      console.log("error");
    }
  }).done(function(data) {
    $('#json').append(data); //content loads here
    runPostAjax(data)
  }),
  error: function(xhr, desc, err) {
    console.log("error: "   desc   " "   err);
  }
});



function runPostAjax(data) {
  //data = JSON.parse($("#json").val());
  let done = data.length; // number of total requests
  $.each(data, function(key, val) {
        $.ajax({
            type: "POST",
            url: "/generateInvoice.php",
            dataType: "html",
            data: val,
            success: function(data, status) {
              if (data) {
                $("#result").append(data)
                done -= 1;
                if (done == 0) {
                  $("#loader").hide();
                  $("#done").show();
                }
              } else {
                console.log("Error");
              }
            })


        }