Oervald Oervald - 1 month ago 11
HTML Question

Html templates loaded asynch (JQuery/JavaScript asynch)

So I'm making a webpage with some code snippets loaded in from txt files. The information to paths and locations of the txt files are stored in a json file. First I'm loaing the json file looking like this

[
{"root":"name of package", "html":"htmlfile.txt", "c":"c#file.txt", "bridge":"bridgefile"},
{"root":"name of package", "html":"htmlfile.txt", "c":"c#file.txt", "bridge":"bridgefile"}
]


After loaded I'm using templates from my index.html file and then inserting the templates. My problem is that its happening asynch so that the page never looks the same because of the asynch nature of js.
Here is what my jquery code for loading and inserting looks like:

$(document).ready(function () {
var fullJson;
$.when(

$.get('/data/testHtml/data.json', function (json) {

fullJson=json;

})

).then(function(){
for(var i=0; i<fullJson.length; i++){
templefy(fullJson[i],i);
}
})


var templefy = function (data, number) {

//Fetches template from doc.
var tmpl = document.getElementById('schemeTemplate').content.cloneNode(true);
//Destination for template inserts
var place = document.getElementsByName('examples');

//Set name
tmpl.querySelector('.name').innerText = data.root;

//Next section makes sure that each tap pane has a unique name so that the system does not override eventlisteners
var htmlNav = tmpl.getElementById("html");
htmlNav.id += number;

var htmlLink = tmpl.getElementById('htmlToggle');
htmlLink.href += number;

var cNav = tmpl.getElementById('c');
cNav.id += number;

var cLink = tmpl.getElementById('cToggle');
cLink.href += number;

var bridgeNav = tmpl.getElementById('bridge');
bridgeNav.id += number;

var bridgeLink = tmpl.getElementById('bridgeToggle');
bridgeLink.href += number;


//Auto creates the sidebar with links using a link template from doc.
var elementLink = tmpl.getElementById('elementLink');
elementLink.name +=data.root;

var linkTemplate = document.getElementById('linkTemplate').content.cloneNode(true);
var linkPlacement = document.getElementById('linkListWVisuals');
var link = linkTemplate.getElementById('link');
link.href = "#"+data.root;
link.innerText = data.root;
linkPlacement.appendChild(linkTemplate);


//Fetches html, c# and bridge code. Then inserts it into template and finally inserts it to doc
$.get("/data/" + data.root + '/' + data.html, function (html) {
tmpl.querySelector('.preview').innerHTML = html;
tmpl.querySelector('.html-prev').innerHTML = html;


$.get('/data/' + data.root + '/' + data.c, function (c) {
tmpl.querySelector('.c-prev').innerHTML = c;

$.get('/data/' + data.root + '/' + data.bridge, function (bridge) {
console.log(bridge);
tmpl.querySelector('.bridge-prev').innerHTML = bridge;
place[0].appendChild(tmpl);
})

})
})
}

});


So yeah my problem is that it just fires in templates whenever they are ready and not in the order written in the json file.

I'll take whatever help I can get..Thank you :)

Answer

My only way out has been to make the whole application in angular instead and using a filter to make sure that I get the right result.

Comments