Generate Table dynamically with AJAX data using Javascript

Question

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

Is there a specific reason you can't generate the table in php? Or do you need the data for something other than just displaying? — Tim Seguine
– Tim Seguine, Commented Nov 16, 2014 at 19:14
I'm sure he COULD generate the table in php, but sending the full HTML of a table can be a lot of data compared to a little bit of JSON. When rendering DOM elements based on AJAX responses, it's generally best to send a little data as possible, and then let the client construct the DOM based on that data. — Raphael Serota
– Raphael Serota, Commented Nov 16, 2014 at 19:17
The problem here is that your table constructing code is being executed asynchronously in a callback. By the time it gets executed, the closing tag for the table has already been written to the global variable and written to the document. — Tim Seguine
– Tim Seguine, Commented Nov 16, 2014 at 19:18
@RaphaelSerota my php suggestion is because I was thinking that is going to be easier for a beginner to get working. — Tim Seguine
– Tim Seguine, Commented Nov 16, 2014 at 19:21
@TimSeguine, yes I'm using the data to display some data using Google Maps. — ic90
– ic90, Commented Nov 17, 2014 at 5:34

Rob Baillie · Accepted Answer · 2014-11-16 19:22:49Z

2

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...

answered Nov 16, 2014 at 19:22

Rob Baillie

3,4702 gold badges24 silver badges35 bronze badges

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

2 Comments

Tim Seguine Over a year ago

+1 Easiest change to OP's code that does what they want.

ic90 Over a year ago

Thank you! It worked instantly and also for the tip.

Collectives™ on Stack Overflow

Generate Table dynamically with AJAX data using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related