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:
</table>
tag? and why on earth <tr></tr>
gets written before <td>
tags, though lastly </tr>
appended lastly <td> in last
append()` 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
Post a Comment