title: Creating html table using javascript ajax calls in sequential order?
body: <p>I am new to JavaScript. I am creating one table dynamically; I am facing a problem with the order of execution. I know JavaScript code won't execute sequentially, but what will be the work around?</p>
  
  <p>First I will brief what I am trying to do.</p>
  
  <p>1) <code>loadList ()</code> -> I will call this method on click of load data button 
    here I will fire AJAX request to get data</p>
  
  <p>2) using the result of above AJAX request, I am trying to create table rows</p>
  
  <p>3) few table rows <code>td</code> having combo box, whose value to be filled using another AJAX call, passing the <code>rowObject</code> value</p>
  
  <p>Below is my code:</p>
  
  <pre><code>var loadList = function(){
  
  //ajax call
  $.ajax({
      url:"tworows.json",
      type: "GET",
      dataType : "json"
  })
  .done(function(data, textStatus, jqXHR){
      generateTable(data);
  });
  };
  
  
  function generateTable(data){
  
  $("#gridTable").empty();
  
  //create table header
  var headertr = $("&lt;tr&gt;&lt;th&gt;col1 &lt;/th&gt;&lt;th&gt;col 2&lt;/th&gt;&lt;th&gt;col 3&lt;/th&gt;&lt;th&gt;col 4&lt;/th&gt;&lt;th&gt;col 5&lt;/th&gt;&lt;th&gt;col 6&lt;/th&gt;&lt;th&gt;col 7&lt;/th&gt;&lt;/tr&gt;");
  
  //get table id from jquery
  var tableelement = $("#gridTable");
  
  //add header row to table
  tableelement.append(headertr);
  
  
  for(var i=0; i&lt; data.links.id.length; i++){
          tableelement.append(createRow(data.links.id[i]));
  }       
  
  }
  
  function createRow(rowObject){
  
  //used to create combo box 1 based row 1 value
  var combo1 = createCombo1(rowObject);
  
  //used to create combo box 2 based row 1 value
  var combo2 = createCombo2(rowObject);
  
  
  var trElement = "&lt;tr&gt;"+
          "&lt;td&gt;&lt;input type='text' name='col1name' value='"+rowObject.Number+"' onblur='handleInput(this)'/&gt;&lt;/td&gt;"+
          "&lt;td&gt;&lt;input type='text' name='col3name' value='"+rowObject.name+"'/&gt;&lt;/td&gt;"+
          "&lt;td&gt;&lt;input type='text' name='col3name' value='"+rowObject.quantity+"'/&gt;&lt;/td&gt;"+
          "&lt;td&gt;"+combo1+"&lt;/td&gt;"+
          "&lt;td&gt;"+combo2+"&lt;/td&gt;"+
          "&lt;td&gt;&lt;button&gt;Del&lt;/button&gt;&lt;/td&gt;" +
          "&lt;td&gt;&lt;button&gt;Add&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
  
  return trElement;
  }
  
  function createCombo1(rowObject){
  
  var comboList = [];
      //call ajax to get combo value
      $.ajax({
          url:"combo1data.json",
          type: "GET",
          dataType : "json",
          async : false
      })
      .done(function(data, textStatus, jqXHR){
          comboList = data.links.id;
      });     
  
      var cmb1 = "&lt;select  name='cmb1' onchange='handlecmb1Change(this)'&gt;";
      for(var i=0;i &lt; comboList.length; i++){
      cmb1 +="&lt;option value='"+comboList[i].id+"'&gt;"+comboList[i].name+"&lt;/option&gt;";
      }
  
      cmb1 += "&lt;/select&gt;";
  
      return cmb1;
  }
  
  function createCombo2(rowObject){
  var comboList = [];
  //call ajax to get combo value
  $.ajax({
      url:"combo2data.json",
      type: "GET",
      dataType : "json",
      async : false
  })
  .done(function(data, textStatus, jqXHR){
      comboList = data.links.id;
  });
  var cmb2 = "&lt;select onchange='handlecmb2Change(this)'&gt;";
  
  for(var i=0;i &lt; comboList.length; i++){
      cmb2 +="&lt;option value='"+comboList[i].id+"'&gt;"+comboList[i].name+" &lt;/option&gt;";
      }
  
  cmb2 += "&lt;/select&gt;";
  return cmb2;
  }
  </code></pre>
  
  <p>Here row is creating first, after that control is going to <code>createCombo</code> methods. Because of this I am not getting combo boxes in <code>td</code>.</p>
  
  <p>I want to create combobox based on first result of AJAX call; using the first result I need to call other 2 AJAX calls and populate them in the <code>td</code> combobox.</p>