jquery - Why doesn't this Javascript code execute sequentially? -



jquery - Why doesn't this Javascript code execute sequentially? -

using jquery i'm doing phone call server returns json. have callback defined using .done create callback, doesn't seem behave sequentially.

i've got div in html (<div id="properties"></div>), , seek fill div table of results:

request.done(function(data){ if (data['result'].length == 0) { $("#properties").html("<h3>no results 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 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 .done called 1 time ajax phone call returns something, withint call, should behave sequentially right? there 2 things really don't understand here:

why table row , info written after </table> tag? and why on earth <tr></tr> gets written before <td> tags, though lastly </tr> appended lastly <td> in lastappend()` in foreach loop?

so tried appending whole table row in 1 go:

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

this works bit better, still 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, blows mind. tips welcome!

what seeing here tags closing out on you, because elements getting created in whole on append/html. in order behavior you're expecting build in string, more this:

request.done(function(data){ if (data['result'].length == 0) { $("#properties").html("<h3>no results 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); } });

javascript jquery ajax json callback

Comments

Popular posts from this blog

xslt - DocBook 5 to PDF transform failing with error: "fo:flow" is missing child elements. Required content model: marker* -

mediawiki - How do I insert tables inside infoboxes on Wikia pages? -

Local Service User Logged into Windows -