Can't get table data using GetElementById in Javascript/AJAX

Question

Here is my JavaScript function.

var ajaxRequest = new XMLHttpRequest;
ajaxRequest.open("GET", "crudops.aspx?StudentId="+id+"&StudentName="+name+"&operation=insert", false);
ajaxRequest.send(null);
document.getElementById("TableDiv").innerHTML = ajaxRequest.responseText;
var t = document.getElementById("TableDiv").innerHTML;
alert(t);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = id;
cell2.innerHTML = name;

Here is what is there inside t.

<table id="studenttable" cellpadding="5"><tbody><tr><th>Student Id</th><th>Student Name</th> ... </table>

But I'm unable to read table into a variable using something like

var table = t.getElementbyId("studenttable");

How to read that table and append rows? help me with suggestions.

What do you get if you `console.log(ajaxRequest.responseText);`? — caramba, May 06 '17 at 06:35
`var row = table.insertRow(0);` what is `table` ? You have only `t`, not `table` man. Also `innerHTML` returns a string!! — Roko C. Buljan, May 06 '17 at 06:51
Read first [this](http://stackoverflow.com/a/13539769/2008111) then [this](http://stackoverflow.com/a/5447978/2008111) and then [this](http://stackoverflow.com/a/13467331/2008111) I would stick with the second link. I think that is the most simple to use. — caramba, May 06 '17 at 06:51
ajax is `asynchronous` - the response is not guaranteed to arrive immediately after the request is sent but your code is trying to use the response in a synchronous manner. Use a callback function to process the response and manipulate the DOM — Professor Abronsius, May 06 '17 at 06:52

Stanislav Mayorov · Answer 1 · 2017-05-06T06:53:27.660

1

var t = document.getElementById("TableDiv").innerHTML;
var table = t.getElementById("studenttable");

t varible shoud be an element, not a string. Try to delete .innerHTML;.

edited May 06 '17 at 06:53

answered May 06 '17 at 06:46

Stanislav Mayorov

4,298
5
21
44

Professor Abronsius · Answer 2 · 2017-05-06T07:01:56.107

Due to the nature of asynchronous requests you need to assign a callback function to process the response data rather than expect the response immediately

var xhr = new XMLHttpRequest;
xhr.onreadystatechane=function(){
    if( xhr.readyState==4 && xhr.status==200 ){

        document.getElementById("TableDiv").innerHTML = xhr.response;
        var t = document.getElementById("TableDiv").innerHTML;
        alert(t);

        var row = table.insertRow(0);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);

        cell1.innerHTML = id;
        cell2.innerHTML = name;     

    }
};
xhr.open( "GET", "crudops.aspx?StudentId="+id+"&StudentName="+name+"&operation=insert", true );
xhr.send(null);

I hadn't noticed the use of `false` for the synchronous flag — Professor Abronsius, May 06 '17 at 07:02

score 1 · Answer 3 · answered May 06 '17 at 07:28

Set XHR async to true (or you can omit it)
Use a onreadystatechange callback
Don't refer to DOM Elements by innerHTML use the DOM Node Element Object instead

jsBin live demo

var id = "123",
    name = "This Is A Name";


var XHR = new XMLHttpRequest(),
    method = "GET",
    url = "crudops.aspx?StudentId="+id+"&StudentName="+name+"&operation=insert";

XHR.open(method, url, true); // << or omit async (anyway defaults to true)

XHR.onreadystatechange = function () {
  if(XHR.readyState === XMLHttpRequest.DONE && XHR.status === 200) {

    document.getElementById("TableDiv").innerHTML = XHR.responseText;

    // Use meaningful var names
    // var tableWrapper = document.getElementById("TableDiv").innerHTML;

    // BTW since at this point your table is (hopefully) in the DOM
    // you can go get it directly
    var table = document.getElementById("studenttable");

    if(!table) return; // Do nothing if no such Element in DOM

    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = id;
    cell2.innerHTML = name;

  }
};

XHR.send();

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open

score 0 · Answer 4 · answered May 06 '17 at 06:51

0

The letter "d" need to be uppercase.

var table = t.getElementById("studenttable");

answered May 06 '17 at 06:51

Alex Parloti

668
1
9
25

Can't get table data using GetElementById in Javascript/AJAX

4 Answers4