CODEWITHSUNDEEP
javascriptphpajax
ic90
ic90

Reputation: 444

Generate Table dynamically with AJAX data using Javascript

I'm trying to dynamically generate a table with JavaScript using AJAX and displayed using Bootstrap but I can't seem to get the table to show.It only shows the header fields. Any help would be greatly appreciated.

<button onclick="display();">Generate Table</button>
<div id="myTable"></div>




function display(){

  var HTML = "<table class='table table-striped table-bordered table-hover' style='width:500px'>";

  HTML += "<tr><th>Place</th><th>Description</th></tr>";

  var search = 106;

  makeRequest('findplace.php?searchbynumber='+search,function(data){
    var data = JSON.parse(data.responseText);
    for(var i = 0;i<data.length;i++){
      HTML += "<tr><td>" + data[i].place + "</td><td>" + data[i].description + "</td></tr>";
    }
  });

  HTML += "</table>";

  document.getElementById('myTable').innerHTML = HTML;
}

function makeRequest(url, callback) {
  var request;

  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
  }

  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request);
    }
  }

  request.open("GET", url, true);
  request.send();
}

Upvotes: 2

Views: 2207

Answers (1)

Rob Baillie
Rob Baillie

Reputation: 3460

As Tim says in the comment, this is to do with the asynchronous nature of the call you're making in makeRequest.

You essentially build the outside of the table and add that the HTML, then the callback is called later, builds up a new variable and never does anything with it.

You have a number of options, but the simplest is probably to move the creation of the HTML into the callback and build it in one go on return from the onreadychangestate and you have everything you need to output.

I.E. Move ALL the HTML construction into your callback and the problem should go away:

function display(){

  var search = 106;

  makeRequest('findplace.php?searchbynumber='+search,function(data){

    var HTML = "<table class='table table-striped table-bordered table-hover' style='width:500px'>";

    HTML += "<tr><th>Place</th><th>Description</th></tr>";

    var data = JSON.parse(data.responseText);
    for(var i = 0;i<data.length;i++){
      HTML += "<tr><td>" + data[i].place + "</td><td>" + data[i].description + "</td></tr>";
    }

    HTML += "</table>";

    document.getElementById('myTable').innerHTML = HTML;

  });
}

function makeRequest(url, callback) {
  var request;

  if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
  } else {
    request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
  }

  request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
      callback(request);
    }
  }

  request.open("GET", url, true);
  request.send();
}

As for other options:

As one idea, you could build the outside of the table as you do, but with a "Loading..." bit of text in there and then add the rows in the callback - but if you're looking for that I'd say that's an exercise for the reader...

Upvotes: 2

Related Questions