CODEWITHSUNDEEP
javascriptjqueryajax
M.Izzat
M.Izzat

Reputation: 1166

javascript - execute function after for loop

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);
                        }
                    })
            }
        }

Upvotes: 1

Views: 1609

Answers (2)

Kai
Kai

Reputation: 3713

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.

Upvotes: 1

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38992

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);
    });
}

Upvotes: 1

Related Questions