0

Before I begin my question, please note that much of this code is in the early stages of development. As such, many of the things present are only there to provide a base functionality for testing purposes. Thus, please focus only on the question at hand.

Anyways, I have this function loginUser...

    function loginUser()
    {
      var numRowsReturned;
      var username = document.getElementById('login_username').value;
      var password = document.getElementById('login_password').value;
      var queryString = "SELECT COUNT(*) FROM User WHERE Username = '" + username + "' AND Password = '" + password + "'";

      try
      {
        var rtn = grabData(queryString);
      }
      catch(e){alert(e);}

      //setTimeout(function()
      //{
        numRowsReturned = rtn[0].values[0];
        console.log(numRowsReturned);
      //}, 4000);

      if(numRowsReturned != 1)
      {
        var errorMsg = 'Our records do not match what you have entered.  Please try again.';
        var err = document.createElement("div");
        err.setAttribute("class", "alert alert-danger fade in");
        err.innerHTML = '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Error!</strong> ' + errorMsg + '</a>';

        document.getElementById("main_content").insertBefore(err, document.getElementById("main_content").firstChild);
      }
      else
      {
        queryString = "SELECT * FROM User WHERE Username = '" + username + "' AND Password = '" + password + "';";

        try
        {
          var rtn = grabData(queryString);
        }
        catch(e){alert(e);}


      }
    }

of which grabs the user's login input values and uses them to run a query returning the count of accounts with that info. If a count of 1 is returned, it will call the function grabData, which queries the database for all relevant login info for that account and stores it in an HTML array. If anything other than 1 is returned, it throws an error to the user. Here is grabData...

    function grabData(queryString)
    {
      var db, reader, xhr, holder;
      var xhr = new XMLHttpRequest();

      xhr.onload = function()
             {
              var uIntArray = new Uint8Array(this.response);
              db = new SQL.Database(uIntArray);

              holder = db.exec(queryString);
              console.log(holder);
             };

      xhr.onreadystatechange = function()
                   {
                       if(xhr.readyState == 4 && xhr.status == 200)
                      console.log('here!');
                   };

      xhr.open("GET", "http://192.168.1.11:8080/pages/finalProj.db", true);
      //xhr.setRequestHeader("Content-Type", "text/xml");
      xhr.responseType = "arraybuffer";

      xhr.send(null);

      return holder;
    }

With my code, I am able to connect to a database and retrieve the correct data. However, when I try to use this data, due to the fact that this section of code is asynchronous, more often than not the query has not yet been complete or the HTML array is not finished being populated. As such, I get a "cannot read property of undefined" error.

Thus, I am simply wondering - how do I use a callback correctly within this code so as to not execute any further code until the query is finished and array is populated? Thanks in advance.

0x436875636b79_Pinkman
  • 9
  • 1
  • Could you try to trim down your code to a more minimal example? For instance, I think that everything in your first code block after the try/catch is irrelevant to the question of "how do I use a callback here". – Hawken MacKay Rives Apr 27 '16 at 02:44
  • You probably need to wrap your `onload` code in `if(xhr.readyState == 4 && xhr.status == 200)`, better yet move you code over to the `onreadystatechange` that you already have. Either way, status must be 200 and ready state must be 4. – 4castle Apr 27 '16 at 03:08

0 Answers0