CODEWITHSUNDEEP
javascriptjqueryajax
plr
plr

Reputation: 511

populating data in two html tables using two ajax calls

i'm trying to populate two tables using two separate ajax calls. following is my code.

var payload = "authUserName=admin&authPassword=admin";

$.ajax({
  url: "https://appserver.dev.cloud.wso2.com/t/madusanka/webapps/projecttracker-default-SNAPSHOT/services/projecttracker/userservice/user/1/projects",
  type: "POST",
  async: false,
  dataType: "json",
  data: payload,
  complete: function(data) {
    alert("complete " + JSON.stringify(data));

//            for(var i = 1; i<= data.projects.project.length; i++){
//                  var tableRow = "<tr><td>" + data.projects.project[i].projectName + "</td><td>" + data.projects.project[i].startDate + "</td><td>" + data.projects.project[i].endDate + "</td><td>" + data.projects.project[i].statusId + "</td><td>" + "delete"  + "</td></tr>";
//                  $("#projectListTable tbody:last").append(tableRow);
//         }

  }
}).then(function(data) {

    alert("started");

    var payload2 = "authUserName=admin&authPassword=admin";

    $.ajax({
      url: "https://appserver.dev.cloud.wso2.com/t/madusanka/webapps/projecttracker-default-SNAPSHOT/services/projecttracker/userservice/user/1/projects",
      type: "POST",
      async: false,
      dataType: "json",
      data: payload2
    }).then(function(data) {
        alert("ended");
        for(var i = 1; i<= data.projects.project.length; i++){
          var tableRow = "<tr><td>" + data.projects.project[i].projectName + "</td><td>" + data.projects.project[i].startDate + "</td><td>" + data.projects.project[i].endDate + "</td><td>" + data.projects.project[i].statusId + "</td><td>" + "delete"  + "</td></tr>";
          $("#userTable tbody:last").append(tableRow);
        }
     });                        
 });

If i run above code as it is it will execute well and execute whatever functions in "then".

When i uncomment the commented for loop, it won't execute beyond that for loop. after populating project list table it simply stop executing. therefore "then" functions won't get executed. it seems only one table data population loop can be there.

I want both tables to be populated one after other using ajax. I'm really confused about this. Can someone point me in correct direction?

Upvotes: 0

Views: 725

Answers (1)

ivan.sim
ivan.sim

Reputation: 9268

Why do you need to have both complete and then callback functions? Looking at your codes, they don't seem to do anything different. You might as well just merge them like this:

var payload = "authUserName=admin&authPassword=admin";
$.ajax({
  url: "https://appserver.dev.cloud.wso2.com/t/madusanka/webapps/projecttracker-default-SNAPSHOT/services/projecttracker/userservice/user/1/projects",
  type: "POST",      
  dataType: "json",
  data: payload,
  complete: function(data) {
    alert("complete " + JSON.stringify(data));

    for(var i = 1; i<= data.projects.project.length; i++){
      var tableRow = "<tr><td>" + data.projects.project[i].projectName + "</td><td>" + data.projects.project[i].startDate + "</td><td>" + data.projects.project[i].endDate + "</td><td>" + data.projects.project[i].statusId + "</td><td>" + "delete"  + "</td></tr>";
      $("#projectListTable tbody:last").append(tableRow);
      $("#userTable tbody:last").append(tableRow);
    }
  }
});

Upvotes: 1

Related Questions