Dynamically creating table using jQuery. Table is not getting displayed

Question

I am new to jQuery. I have to query 2 web services and based on an attribute value in first web service I have to query the next one and populate the result in a table using data from both web services.

Please have a look at the code at http://jsfiddle.net/ykPXZ/2/ . I am trying to append the table data to a div having id="tableData". I am getting the data from the web service and I have checked the console logs to see whether the data is getting appended to the variable tableDataA and it is getting appended but I am not to display the data on the web page. Somehow it is getting rewritten or deleted.

Please tell me if this is the best approach for solving this problem. Please suggest a better approach to it.

Thanks.

EDIT: Dynamically generated table is showing 23 rows instead of 24.

Hi, I am following the approach as mentioned by mu is too short in the first answer. The issue I am having now is that instead of getting all the 24 rows to be displayed in the table, it is displaying only 23 rows and missing the 1st row data. When I am logging it in the console, it shows all 24 entries but in the table 23 rows are getting displayed.

Please suggest some solution for the same.

Thanks.

EDIT: I have been able to solve the above issue of showing 23 rows instead of 24. It might be useful for others.In the correct answer below,instead of using the i, it should have been i+1.

     $tr = $('#tableData table tr:eq(' + i + ')');

replace it by

     $tr = $('#tableData table tr:eq(' + (i+1) + ')');

Thanks.

mu is too short · Accepted Answer · 2013-07-04 15:38:05Z

1

The success callback from your main $.ajax call looks like this:

success: function(data) {
    var tableDataA = '<table border="0" width="500">';
    $.each(data, function(i, detail) {
        $.getJSON("webService2", function(metaData) {
            // ...
        });
    });

    tableDataA = tableDataA + '</table>';
    $('#tableData').empty();
    $('#tableData').append(tableDataA);
}

Each of your $.getJSON calls is asynchronous so the callback functions that build tableDataA won't be executed until some time after your success callback is finished. That means that when you get to the bottom of the success callback, you're just doing this:

    $('#tableData').empty();
    $('#tableData').append('<table border="0" width="500"></table>');

and you get an empty table. Later, when the $.getJSON calls finish, they will add some data to tableDataA but it will be too late, no one will care what's in tableDataA at that point.

You could replace your $.getJSON calls with synchronous $.ajax calls but your users will hate you for it.

You could build the whole empty table in your success callback and then your $.getJSON callbacks would just fill in the blanks with something like this in your success callback:

var tableDataA = '<table border="0" width="500">';
for(var i = 0; i < data.length; ++i)
    tableDataA += '<tr><td></td><td></td><td></td><td></td></tr>';
tableDataA += '</table>';
$('#tableData').empty();
$('#tableData').append(tableDataA);

$.each(data, function(i, detail) {
    $.getJSON('webService2', function(metaData) {
        $tr = $('#tableData table tr:eq(' + i + ')');
        // Fill in the table cells in $tr
    });
});

If possible, it would be better to merge the two services into one that would give you the whole JSON blob that you need in one go. If you don't have control over the remote systems then the above "fill in the blanks" approach might be the easiest approach.

edited Jul 4, 2013 at 15:38

answered Oct 4, 2011 at 5:39

mu is too short

436k71 gold badges863 silver badges822 bronze badges

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

9 Comments

user977815 Over a year ago

Hi mu, thanks for the reply. I will try out this approach. I have a question regarding the table formation. Is this approach good or creating table using the array is better like in this link stackoverflow.com/questions/4864294/… as for a particular user might have a lot of data and the table needs to be generated in a reasonable time. The web services are out of my control and I have to work with what is given to me.

mu is too short Over a year ago

@user977815: You don't have the data when you want it so you can't do what the answer is doing. Here I build the whole empty table and then fill it in as data becomes available; you don't know what order the getJSON calls will return in so you want the whole table to be in place all the time so that you don't have to mess around with figuring out where things should go as the getJSON calls return. If you have a large table to fill then you might end up with too many getJSON calls for comfort, then you'd have to manage the queuing by hand (and that gets ugly).

user977815 Over a year ago

Right now I am working on making a prototype but it might be made into a full fledged webapp. I need to built it in such a way so that it scales up for large data set too. Do you suggest using anything other than getJSON? Also I will need to perform tasks like sorting the data by a column and filtering data but that needs to be done using drop down options rather than thead approach so I can't use DataTables pluggin(or similar ones) for it.If you know of any pluggin please suggest for accomplishing the above task of sorting and filtering or it needs to be done using custom functions.

user977815 Over a year ago

Can you please give an example of manipulating $tr and adding content to it as I am a newbie in jQuery. Thanks again.

Greg Pettit Over a year ago

DataTables has an API that will allow you to sort and filter from whatever elements you want. You may not have seen it during your initial research because the DT API is expansive. Based on your description, I would strongly recommend trying DataTables.

|

user743940 · Accepted Answer · 2011-10-04 15:29:55Z

Here is some basic table tr manipulation using basic jQuery.

$('.gridNoTaxes').find('tr').each(function () { var totalRowCount = $('.gridNoTaxes').find("tbody tr").length;

var currentRowIndex = $(this)[0].rowIndex;

if ((currentRowIndex != (totalRowCount - 1)) && (currentRowIndex != 0)) {

    var priorCompID = $(this).find('td:eq(0)').children().get(0);
    var date = $(this).find('td:eq(1)').children().get(0);
    var amount = $(this).find('td:eq(2)').children().get(0);

    if (priorCompID.value.toString() == "") {
        valueString = valueString + '0' + '|';
    }
    else {
        valueString = valueString + priorCompID.value.toString() + '|';
    }

    valueString = valueString + date.value.toString() + '|';
    valueString = valueString + amount.value.toString() + '|~~';

    }
});


$('.gridNoTaxes').find('tbody')
 .append($('<tr>')
 .append($('<td>')
 .append($('<input>')
 .attr('class', 'pcID')))

 .append($('<td>')
 .append($('<input>')
 .attr('class', 'date')
 .attr('onBlur', 'HandleEvent_SimpleGrid(this)')))


 .append($('<td>')
 .append($('<input>')
 .attr('class', 'amount')
 .attr('onBlur', 'HandleEvent_SimpleGrid(this)')))

 .append($('<td>')));

Collectives™ on Stack Overflow

Dynamically creating table using jQuery. Table is not getting displayed

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related