Why doesn't this Javascript code execute sequentially?

Question

Using jQuery I'm doing a call to my server which returns some json. I then have a callback defined using .done to create a callback, which doesn't seem to behave sequentially.

I've got a div in my html (<div id="properties"></div>), and I try to fill that div with a table of results:

request.done(function(data){
    if (data['result'].length == 0) {
        $("#properties").html("<h3>No results were found..</h3>");
    } else {
        $("#properties").html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody>");
        data['result'].forEach(function(prop){
            $("#properties").append("<tr>");
            $("#properties").append("<td>prop.status</td>");
            $("#properties").append("<td>prop.title</td></tr>");    
        });
        $("#properties").append("</tbody></table>");
    }
});

The result I get is this:

<div id="properties">
    <table class="table table-hover"><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table>
    <tr></tr>
    <td>prop.status</td>
    <td>prop.title</td>
</div>

I know that .done is only called once the ajax call returns something, but withint that call, it should behave sequentially right? There are 2 things I really really don't understand here:

Why do the table row and data get written after the </table> tag?
And why on earth does the <tr></tr> gets written before the <td> tags, even though the last </tr> is appended together with the last <td> in the lastappend()` in the foreach loop?

So I also tried appending the whole table row in one go:

$("#properties").append("<tr><td>prop.status</td><td>prop.title</td></tr>");

This works a bit better, but still only produces this:

<div id="properties">
    <table class="table table-hover"><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table>
    <tr><td>prop.status</td><td>prop.title</td></tr>
</div>

Javascript has puzzled me before, but this really blows my mind. Any tips are welcome!

html('<table>') adds full table like html('<table></table>'); — u_mulder
– u_mulder, Commented Oct 19, 2014 at 12:43
This is not how works append() which appends full DOM node, not only part — A. Wolff
– A. Wolff, Commented Oct 19, 2014 at 12:44
@A.Wolff - So how do I build the table in parts using jQuery then? — kramer65
– kramer65, Commented Oct 19, 2014 at 12:45
You should either generate full table content as string and then html(tableString) or make a selector like $('#properties table') and work with it — u_mulder
– u_mulder, Commented Oct 19, 2014 at 12:46
@u_mulder - Awesome! That solved it! If you add your comment as an answer I can accept it. — kramer65
– kramer65, Commented Oct 19, 2014 at 12:50

James Daniels · Accepted Answer · 2014-10-19 12:51:42Z

What you are seeing here are tags closing out on you, because those elements are getting created in whole on append/html. In order to get the behavior you're expecting build in a string, say something more like this:

request.done(function(data){
    if (data['result'].length == 0) {
        $("#properties").html("<h3>No results were found..</h3>");
    } else {
        var propertiesTableHTML = "<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody>";
        data['result'].forEach(function(prop){
            propertiesTableHTML += "<tr>";
            propertiesTableHTML += "<td>" + prop.status + "</td>";
            propertiesTableHTML += "<td>" + prop.title + "</td>";
            propertiesTableHTML += "</tr>";
        });
        propertiesTableHTML += "</tbody></table>";
        $("#properties").html(propertiesTableHTML);
    }
});

Salman Arshad · Accepted Answer · 2014-10-19 13:51:12Z

You are expecting .html() and .append() to work like document.write() but they don't. When used with HTML, they expect proper HTML. Broken HTML (for example missing end tags) is corrected which leads to the unexpected behavior. This part of your code for example:

$("#properties")
    .html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody>");

Produces the following result:

<table>
    <thead>
        <tr>
            <th>Status</th>
            <th>Title</th>
        </tr>
    </thead>
    <tbody>
    </tbody><!-- tag closed automatically -->
</table><!-- tag closed automatically -->

Along the same lines, this code:

 $("#properties").append("<tr>");
 $("#properties").append("<td>prop.status</td>");
 $("#properties").append("<td>prop.title</td></tr>");

Produces the following result:

...
</table>
<tr></tr><!-- tag closed automatically -->
<td>prop.status</td>
<td>prop.title</td><!-- </tr> ignored -->

One possible solution is to revise your code like this:

$("#properties").html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table>");
data['result'].forEach(function(prop){
    var $tr = $("<tr></tr>").appendTo("#properties > table > tbody");
    $("<td></td>").text(prop.status).appendTo($tr);
    $("<td></td>").text(prop.title).appendTo($tr);
});

Guffa · Accepted Answer · 2014-10-19 13:01:18Z

You can't add tags to the DOM, you can only add elements. When you try to add a <table> tag, it will add a complete table element. When you try to add the ending tag, it will be ignored (or possibly cause an error, depending on the browser) because it's not code that can be parsed into an element.

Rewrite the code to add elements instead of tags:

$("#properties").html("<table><thead><tr><th>Status</th><th>Title</th></tr></thead><tbody></tbody></table>");
var tbody = $("#propertis tbody");
data['result'].forEach(function(prop){
  var row = $("<tr>");
  row.append($("<td>").text(prop.status));
  row.append($("<td>").text(prop.title));
  tbody.append(row);
});

By creating table cells as elements and use the text method to set the content, you avoid the problem with any special characters that would need HTML encoding (e.g. <. >, &) to mess up the HTML code.

Collectives™ on Stack Overflow

Why doesn't this Javascript code execute sequentially?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related