append variable from multiple function which call ajax requests -
i having trouble setting markup variable multiple ajax requests call functions. number of function not know, example made 2 , put them in same js file. trying loop though unknown number of functions , append markup variable response.
however ajax request isn't finished before function ends. how can make sure response ajax before proceeding?
getmarkup() run on document.ready
function getmarkup(){ var news = []; news.push('loadnews1'); news.push('loadnews2'); len = news.length; var markup; for(i=0; i<len; i++){ try{ markup = eval(news[i] + '();'); }catch(ex){ } } console.log(markup); } function loadnews1(){ var host = 'http://test.com'; var path = '/ajax-feeds/news/json1'; var markup = ""; $.ajax({ url: host + path, datatype: "json", async: true, success: function(data) { $.each( data, function( key, value ) { markup += '<div id="new-row-'+key+'" class="news-row">' + '<div class="news-row-spotlight-image"><img src="'+value.picture+'"></div>' + '<div class="news-row-spotlight-title">'+value.title+'</div>' + '<div class="news-row-title">'+value.subtitle+'</div>' + '<div class="news-row-spotlight-teaser">'+value.body+'</div>' + '<div class="news-row-spotlight-link"><a href="http://test.com/'+value.nid+'">more link</a></div></div>'; }); return markup; } }); } function loadnews2(){ var host = 'http://test.com'; var path = '/ajax-feeds/news/json2'; var markup = ""; $.ajax({ url: host + path, datatype: "json", async: true, success: function(data) { $.each( data, function( key, value ) { markup += '<div id="new-row-'+key+'" class="news-row">' + '<div class="news-row-spotlight-image"><img src="'+value.picture+'"></div>' + '<div class="news-row-spotlight-title">'+value.title+'</div>' + '<div class="news-row-title">'+value.subtitle+'</div>' + '<div class="news-row-spotlight-teaser">'+value.body+'</div>' + '<div class="news-row-spotlight-link"><a href="http://test.com/'+value.nid+'">more link</a></div></div>'; }); return markup; } }); }
Comments
Post a Comment