HTML code inside JQuery

Question

I am trying to show a HTML table populated from JSON values received using AJAX call. This is the HTML and JQuery Script:

<div id="content"></div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script>
            $(document).on("ready", function(){
                loadData();
            }); 

            var loadData = function(){
                $.ajax({
                    type:"POST",
                    url:"http://****/current_batch_jrz.php"
                }).done(function(data){
                    console.log(data);
                    $("#content").append( "<table class='table'><caption> BATCH IN  JUAREZ</caption><thead><tbody><tr><th>CLIENTE</th><th>CERTIFICADO</th><th>PRODUCTO</th><th>LOTE</th><th>FECHA</th><th>FLUJO TREN A</th><th>VOLUMEN TREN A</th><th>FLUJO TREN B</th><th>VOLUMEN TREN B</th><th>VOLUMEN TOTAL</th></tr>");
                    var users = JSON.parse(data)["data"];
                    for(var i in users){
                        $("#content").append("<tr><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td><td>"+users[ i ][0]+"</td></tr>");
                    }
                    $("#content").append( "</tbody></table>");
                });
            }


        </script>

The table columns header is shown as desired, but the row is not shown properly, all values are shown together as you can see in the screenshot:

not an answer but I thought html structure in jquery/js is a bad idea as it can gets really messy. Otherwise build the structure in strings then call it in the append section. — nCore
– nCore, Commented Jul 26, 2016 at 18:52
I think when you append like that, the table will close automatically so your row append won't work. Like Radmation said, build string and just append once. More efficient too — Huangism
– Huangism, Commented Jul 26, 2016 at 18:53
Is there a particular reason why you're returning a string and using JSON.parse on it instead of using dataType: 'json' in the .ajax call? — Paul Tomblin
– Paul Tomblin, Commented Jul 26, 2016 at 19:46

Prabhat · Accepted Answer · 2016-07-26 19:18:44Z

2

That is because <tbody> and <table> tags are automatically closed once first append (where you set table-header) gets executed. Try concatenating a temp variable and then set the $("#content").append() with it.

answered Jul 26, 2016 at 19:18

Prabhat

311 gold badge1 silver badge6 bronze badges

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

Comments

Radmation · Accepted Answer · 2016-07-26 18:53:50Z

(document).on("ready", function () {
    loadData();
});

var loadData = function () {
    $.ajax({
        type: "POST",
        url: "http://201.128.9.14:8081/current_batch_jrz.php"
    }).done(function (data) {
        console.log(data);
        var stringBuilder = "<table class='table'><caption> BATCH IN  JUAREZ</caption><thead><tbody><tr><th>CLIENTE</th><th>CERTIFICADO</th><th>PRODUCTO</th><th>LOTE</th><th>FECHA</th><th>FLUJO TREN A</th><th>VOLUMEN TREN A</th><th>FLUJO TREN B</th><th>VOLUMEN TREN B</th><th>VOLUMEN TOTAL</th></tr>"''
        var users = JSON.parse(data)["data"];
        for (var i in users) {
            stringBuilder += "<tr><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td><td>" + users[i][0] + "</td></tr>";
        }
        stringBuilder += "</tbody></table>";
        $("#content").append(stringBuilder);
    });
}

jQuery .append() automatically closes a tag.

This code uses .append() only once and insteads builds up a string to be used later.

Collectives™ on Stack Overflow

HTML code inside JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related