0

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.

davidism
  • 121,510
  • 29
  • 395
  • 339
Morrtz
  • 47
  • 11

2 Answers2

1

Put everything in a <main> or something and then put load() at the very bottom of the js script.

Put a <div id="loading"></div> outside the <main>.

Then inside function load() put this:

document.querySelector('main').style.display = "block";
document.querySelector('#loading').style.display = "none";

Inside your CSS put this:

main {
  display: none;
}

Then style the #loading however you want, with a spinning loading circle or loading text or whatever.

If you want the finished loading after a certain task and not when the page first loads, then you will put load() inside that function to show the content as if it was done loading.

This allows there to be content when it hasn't completely loaded the js file. So you should put your js file at the bottom after body or at the end inside body so it loads the html before it first and then hide the loader and show the content at the end of the js file which would be after the js has finished loading.

Cameron
  • 1,049
  • 12
  • 24
  • Thanks, I will have a go and send back a response here. – Morrtz Apr 14 '17 at 19:14
  • It doesn't seem to work, the tab opens before the data loads from the server, after a second or two, you can see the data populate the table. Is there a way to wait for the data to populate and only after run the load() function? – Morrtz Apr 14 '17 at 19:46
  • Then put load() at the end of the function that loads the data instead of at the end of the js file – Cameron Apr 14 '17 at 19:47
  • I did. The load is exactly after an array is filled up which is linked to a div like so - `var $pilotInfoArr = $('#pilotInfoArr');` `` – Morrtz Apr 14 '17 at 19:52
  • What does the onclick of #pinfo do? You might want to put the load there inside the onclick() function. – Cameron Apr 14 '17 at 19:54
  • This is the correct way to do it, it just matters when it shows. If that doesn't work, you might want to put a setTimeout() for it to load() after 2 seconds or so – Cameron Apr 14 '17 at 19:56
  • the pinfo click does the following - `
  • ` it calls the function i put up here called openCity, can i add the load in that function? – Morrtz Apr 14 '17 at 20:00
  • If openCity() loads data (which I would think: clicking on a city to view more in depth data that needs to be loaded) then yes put that. – Cameron Apr 14 '17 at 20:03
  • openCity only shows a tab, which should have more information as you said, not yet loaded information. problem is, I'm looking for a way to find out when the data is loaded on the page and only then show it, anyway to do that? – Morrtz Apr 14 '17 at 20:09