First, I'm totally new to web programming - javascript, css etc.. I know some HTML and coming from background of scripting in different languages (lua, batch, shell etc..).
So, to the point, I'm creating a webpage to display some statistics data being generated from a simulator into a MySql DB. So to display it, I was thinking if I should go with PHP, but eventually because I'm already using Flask and Python on the server side, and it does not support PHP, therefore I decided to display the stats through javascript and jquery.
So the way it works is, I have a top menu with tabs, each time a tab is clicked it should show that page, in one of the pages, we can click one of the tables rows to navigate to another tab, problem is, the tab is shown before the data loads into the tables in that tab.
tab function (copied from somewhere on the net):
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
};
row handler to catch clicking the row and run a link to the server to get data for that pilot:
function addRowHandlers() {
var table = document.getElementById("pilotsOverview");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row)
{
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
myFunction(id)
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
Function to get relevant GUID for each pilot name, initiate the data load from the server and click the tab. what happens is that the data loads later and the tab is first shown, need to get a way to run a loader until these functions are finished - pilotsoverview, pilotinfo.
function myFunction(pilotname) {
if (pilotname == null)
{
var pilotname = document.getElementById("list_players").value;
}
var ucid;
for (var key in allPilotArr) {
if (pilotname==allPilotArr[key])
{
ucid = key;
}
};
document.getElementById("demo").innerHTML = "Loading "+pilotname+" Pilot Statistics";
console.log(ucid)
pilotsoverview(ucid)
pilotinfo(ucid)
document.getElementById("pinfo").click();
<!-- location.href='/statistics/'+ucid; -->
};
hope this makes sense or that I explained good enough, as I said I'm really new to javascript and web server vs client side.
Thanks for any help.