Pass html div to ajax call

Question

So I have my server-side code which executes multiple bigquery queries and arranges the results in a table,and this server-side code is called by an ajax call from the client. I want to be able to send the table/div from my server-side code to client-side and have it render there. Is that possible??

I don't want to be able to create the tables on the client by first getting the JSON results through the call, since I will not know which query will run first and all the results are different. (multiple ajax calls are also out of the question for each query)

Server code (app.js)

 function printResult(rows, queryNumber) {
    console.log('Query No. '+queryNumber+' Results:____');
    var keys = [];
    if (queryNumber == 1) {
        var table = document.createElement('table');

        var td = [];
        var tr = document.createElement('tr');
        for (var i = 0; i < rows[0].length; i++) {
            var tn1 = document.createTextNode(rows[i].Content_title);
            var tn2 = document.createTextNode(rows[i].Audience_Size);

            td[i] = document.createElement('td');
            td[i].appendChild(tn1);
            td[i + 1] = document.createElement('td').appendChild(tn2);

            tr.appendChild(td[i]);
            tr.appendChild(td[i + 1]);
            table.appendChild(tr);
            res.send(table);
        }
    }
}

Ajax call

$.ajax({
    url: 'http://localhost:3000/example',
    type: 'POST',
    data: {showname: show, counter: uniquesOverallShowsCounter},
    dataType: 'text',
    contentType: 'application/x-www-form-urlencoded',
    success: function (data) {




        document.getElementById('outputTables').appendChild(data);


    },
    error: function() {
        console.log("error");
    }
});

Answer 1

Yes you can, but as you pointed out in the comments, there is a problem with the data returned.

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

This is an error which is thrown when you try to append a child node with JavaScript, which is not a documentElement (ie document.createElement('div') ). Since you're already using jQuery, you could easily change your code.

In the success function for the AJAX call, change

document.getElementById('outputTables').appendChild(data);

to

$('#outputTables').append(data);

If you want to be able to do multiple AJAX calls from one page and change the table every time (like replace the old table with the new one), you should use html(data) instead of append(data) .

Answer 2

So can you simply increase one more parameter in your response json based on the query which is hit for example "queryProcessed"?

And add that additional check on client side and render the mark up based on that "queryProcessed"