javascript - execute function after for loop

Question

I have a function where onclick a button will get all the id of selected task from a gantt chart and run a for loop to save each of the selected task i edited in a form using AJAX request.

The problem now on AJAX request success I add a code to clear and load all the data again in the gantt chart but it doesn't goes as intended, load the data several times and start creating duplicate of the same data in my gantt, I tried to execute the gantt.load function outside of the loop and it still not working.

So how can I create a condition where I reload the gantt AFTER the loop is finish executed? Any help is much appreciated thanks.

Below is my code :

HTML

<button type="button" class="btn btn-primary" onclick="editForm()">Edit</button>

javascript

 function editForm() {
            var selected_task = gantt.getSelectedTasks();

            for (var i = 0; i < selected_task.length; i++) {
                var task = selected_task[i];
                var data = gantt.getTask(task);
                    $.ajax({
                        type: 'PUT',
                        url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                        data: postData,
                        success: function () {
                            $('#edit_form_modal').modal('hide');
                            gantt.clearAll();
                            gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");

                        },
                        error: function (err) {
                            alert("Failed because of " + err);
                        }
                    })
            }
        }

AJAX calls are asynchronous, due to this you cannot expect synchronous code for to wait for an asynchronous code to finish because you do not have the result at the moment the code is executed and therefore you have to wait for the result, i suggest to implement this using Promises as it can allow you to wait for all the asynchronous code and execute function when there's a result — Oscar Reyes
– Oscar Reyes, Commented Oct 30, 2017 at 5:40

Oluwafemi Sule · Accepted Answer · 2017-10-30 04:30:31Z

1

Map selected tasks to a list of promises and use jQuery when to load the gantt after all the promises have resolved.

function editForm() {
  var selected_task = gantt.getSelectedTasks();

  var saveSelectedTask = selected_task.map(function(task, i) {
    var data = gantt.getTask(task);
    return $.ajax({
      type: 'PUT',
      url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
      data: postData,
    });
  });

  $.when(saveSelectedTask)
    .done(function() {
      $('#edit_form_modal').modal('hide');
      gantt.clearAll();
      gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");
    })
    .fail(function(err) {
      alert("Failed because of " + err);
    });
}

answered Oct 30, 2017 at 4:30

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

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

1 Comment

M.Izzat Over a year ago

Hi @Oluwafemi Thanks for you reply, it helps, but it appear the refresh is still a bit too fast, when the page finish reload some of the data still havent updated yet, so a add a setTimeout() on the gantt.load, it works but not effiecient, do you have any rocommendation for this?

Kai · Accepted Answer · 2017-10-30 04:36:19Z

1

in this case, you should use Promise, exactly is Promise.all (I suggest you go to these URLs to learn more about Promise before implement. The idea is letting the request run parallel, then wait for all finish and do your callback.

I will rewrite your JS to:

function editForm() {
         var selected_task = gantt.getSelectedTasks();
          Promise.all(selected_task.map(function(task) {
            var data = gantt.getTask(task);
            return $.ajax({
                    type: 'PUT',
                    url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                    data: postData,
                })
        }).then(function(results) {
           $('#edit_form_modal').modal('hide');
           gantt.clearAll();
           gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");

        })
    }

update: if you'd prefer to use jQuery function, then you can use $.when()

 function editForm() {
         var selected_task = gantt.getSelectedTasks();
          $.when(selected_task.map(function(task) {
            var data = gantt.getTask(task);
            return $.ajax({
                    type: 'PUT',
                    url: '/api/dashboard/workorder_detail/' + data.workorder_id + '/',
                    data: postData,
                })
        }).then(function(results) {
           $('#edit_form_modal').modal('hide');
           gantt.clearAll();
           gantt.load("/api/scheduler/{{ selected_project.id }}/?format=json", "json");

        })
    }

but as I said above, solve the problem doesn't make you better, should dig deep into it and learn how functions works.

answered Oct 30, 2017 at 4:36

Kai

3,7482 gold badges22 silver badges34 bronze badges

2 Comments

M.Izzat Over a year ago

Hi @Kai Thanks for you reply, it helps and I appreciate the advice, i will study more on this, just 1 more thing, it appear the refresh is still a bit too fast, when the page finish reload some of the data still havent updated yet, so a add a setTimeout() on the gantt.load, it works but not effiecient, do you have any rocommendation for this?

Kai Over a year ago

@M.Izzat I think you should check the update code is working correct or not. Maybe the data was cached.

Collectives™ on Stack Overflow

javascript - execute function after for loop

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related