0

I am attempting to load data from a database with JS to store it in an unordered list in my HTML file. I have another script file that modifies this unordered list with jQuery once the jQuery constructor is called. Below is an overview of the code I have so far:

function init() {

        console.log("init");

        function fb()
        {
            //get data point from database
            var x = document.createElement("LI");
            var t = document.createTextNode(/*data from database*/);
            x.appendChild(t);
            document.getElementById("unordered_list").appendChild(x);
        }

        $('.easy-tree').EasyTree({
                addable: true,
                editable: true,
                deletable: true
        });
    }

    window.onload = init();

The problem I am running into is that the jQuery constructor gets called before I finish updating the unordered list with the correct data from the database. What happens now is that the empty list gets formatted with the jQuery, and then the database data is added in unformatted. The call to the database within the fb() method seems to slow the method down, and allow the constructor to be called before it finishes.

I need to find a way to make sure the fb method is completely done storing items in the unordered list before I call the jQuery constructor to format the data. How could I make sure that happens?

adjuremods
  • 2,938
  • 2
  • 12
  • 17
Roger99
  • 981
  • 2
  • 11
  • 42
  • 1
    By "jQuery constructor", do you mean the `.EasyTree()` call? What does the database call look like? Where are you calling `fb()`? – Jason P Oct 24 '16 at 19:26
  • If you're using an asynchronous function to get the data for the list, you need to add it to your HTML in the callback function. – Barmar Oct 24 '16 at 19:47

0 Answers0