0

I've seen similar questions asked, but it seems that none of them are quite the same circumstance and none of the suggestions I've tried have worked. I need to call a POST from within a for loop, and I want the loop to wait for the response to complete, because it needs the previous iteration to be done before the next one can begin. I tried setting async to false for the ajax call, but that didn't work because I need to update the DOM before the beginning of the loop, after each iteration, and finally at the end, and when the http POST is synchronous it just skips right to the ajax call and locks the thread for the response. This is apparently expected JQuery behavior so I don't think anything is wrong there. So in this code example the process runs as expected but the DOM never updates, and if the async declaration is removed then the process posts all the iterations at once and they are not processed by the server correctly.

$("#form").on("submit", function(e){    
    e.preventDefault();
    $("#submit").prop("disabled",true);
    $(".loader").css("display", "block");
    var iterations = 10;
    const baseUrl = https://exampleapi.com;
    for (let i = 0; i < iterations; i++) {
        ```set post data here```
        $.ajax({
            url: baseUrl + "/endpoint",
            async: false,
            type: "POST",
            data: JSON.stringify(data),
            contentType: "application/json",
        });     
        $(".progress").text("completed " + i + " iterations");      
    }
    $(".loader").css("display", "none");

Can someone help me understand what I'm doing wrong?

user2913576
  • 53
  • 1
  • 6
  • When you execute AJAX synchronously, the DOM isn't rendered until the function returns. So you won't see all the intermediate updates. – Barmar Nov 15 '21 at 22:33
  • This is why synchronous AJAX isn't recommended -- it locks up the browser. – Barmar Nov 15 '21 at 22:33
  • I understand this, that's why I'm asking for help. The problem I came across doing it asynchronously was that I needed the previous post to complete in order to do the next one because of the process going on on the server side. I don't even need the return data, I just need the process to be completed first – user2913576 Nov 15 '21 at 22:51
  • The question I linked to shows how to wait for the previous one to complete before starting the next one. – Barmar Nov 15 '21 at 22:52
  • But the code you've written should wait as you want. Why do you think it's not? – Barmar Nov 15 '21 at 22:53
  • If the important thing is to run sequentially, your code should work. You just won't see the intermediate DOM updates, you'll just see the final update. – Barmar Nov 15 '21 at 22:54
  • As I wrote in my original question, I know the code works but I need the intermediate DOM updates as well – user2913576 Nov 15 '21 at 23:00
  • If you need the immediate DOM updates, you need to run the AJAX asynchronously. See the duplicate question for how to run it asynch and still wait for one to finish before starting the next. – Barmar Nov 15 '21 at 23:03

0 Answers0