jquery - Javascript for loop blocking rest of code -
i having little trouble javascript have written. purpose of code following:
- read list of skus provided .txt file
- split data @ each line
- for each object make lookup on provided json api information sku
- output information html table.
currently have working have expected however, seems not blocks other javascript try run after for
loop.
here example of code
<script type="text/javascript"> //set api address var api = "/api/athenaservice.svc/getproductbysku/"; //get array of skus txt file $.get('/views/locale/promopages/landingpages/tradelist/tradelist.txt',function(data){ //split file lines var line = data.split('\n'); for(i=0;i<line.length;i++) { $.getjson(api + line[i] , function(data1) { // request complete, can use data got! $('.tlistbody').append('<tr><td>' + data1.title + '</td><td align="center">' + data1.platform.button + '</td></tr>'); }); }; }); $(document).ready(function() { $('#searchloading').fadeout('slow'); $('#showform').fadein('slow'); $('input#tradesearch').blur(function() { $('input#tradesearch').quicksearch('table#searchable tbody tr'); }); }); </script>
the problem have none of stuff in within document ready seems work @ all.
i have updated code above reflect suggested fixed below. seems code running fine quicksearch jquery plugin not seem firing. wondering if related fact tr elements should searching newly created dom elements?
any appreciated.
update:
the problem has been solved! little reading through documentation of quicksearch.js plugin , figured out possible add entries quick search cache manually part of loop. has fixed problem.
updated code below;
$(document).ready(function () { var api = "/api/athenaservice.svc/getproductbysku/"; //get array of skus txt file $.get('/views/locale/promopages/landingpages/tradelist/tradelist.txt', function (data) { //split file lines var line = data.split('\n'); var qs = $('input#tradesearch').quicksearch('.thelist tbody tr'); (i = 0; < line.length; i++) { $.getjson(api + line[i], function (data1) { // request complete, can use data got! $('.tlistbody').append('<tr><td>' + data1.title + '</td><td align="center">' + data1.platform.button + '</td></tr>'); qs.cache(); }); }; }); });
thanks , suggestions all
check errors in console, if going wrong suspend script, preventing later code running.
also, looks making lot of http requests there (one per line in file) slow.
appending stuff dom before ready cause problems. move code inside $(document).ready(function() { });