#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2

    Preloader while function loads


    Hello. I am developing an iPhone app using HTML5, CSS, JS. I have a javascript function that pulls a single record (at a time) from a database and displays the HTML in an <article> element on the page. It takes several seconds (upto 30 seconds) the first time it queries the database. Each time after that is much faster. How can I show a preloader while the data is loading?

    Here is the section of JS code that pulls and show the data...

    Code:
      t.executeSql('SELECT id, question, A, B, C, D, answer FROM notes  LIMIT ?', [trNotes.limit], function(t, result) {
                                    var i,
                                    len = result.rows.length,
                                    row;
                                    if (len > 0 ) {
                                    for (i = 0; i < len; i += 1) {
                                    row = result.rows.item(i);
                                    items.push('<div id="spinner"></div><div id="pop' + row.id + '"><div class="question"><strong>pop' + row.id + '</strong><br><br><input type="radio" name="quest' + row.id + '" value="a"/><label>' + row.A + '</label><br><br><input type="radio" name="quest' + row.id + '" value="b"/><label>' + row.B + '</label><br><br><input type="radio" name="quest' + row.id + '" value="c"/><label>' + row.C + '</label><br><br><input type="radio" name="quest' + row.id + '" value="d"/><label>' + row.D + '</label><br><br></div></div>');
                                    
                                    }
                                    
                                    })
    Thanks for any help!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Just change the innerHTML of the article tag; prior to t.executeSql(); something like this:
    Code:
    document.getElementById("article_id_here").innerHTML="Loading Results - Please Wait...";
    t.executeSql('SELECT id, question, A, B, C, D, answer FROM notes  LIMIT ?', [trNotes.limit], function(t, result) {
                                    var i,
                                    len = result.rows.length,
                                    row;
                                    if (len > 0 ) {
                                    for (i = 0; i < len; i += 1) {
                                    row = result.rows.item(i);
                                    items.push('<div id="spinner"></div><div id="pop' + row.id + '"><div class="question"><strong>pop' + row.id + '</strong><br><br><input type="radio" name="quest' + row.id + '" value="a"/><label>' + row.A + '</label><br><br><input type="radio" name="quest' + row.id + '" value="b"/><label>' + row.B + '</label><br><br><input type="radio" name="quest' + row.id + '" value="c"/><label>' + row.C + '</label><br><br><input type="radio" name="quest' + row.id + '" value="d"/><label>' + row.D + '</label><br><br></div></div>');
                                    
                                    }
                                    
                                    })
    Then before you display "item" object's keys; just clear out the innerHTML and set-up the article's innerHTML; to display each of your "item" object's keys, so that they will be displayed in the article tag.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    Ok, I understand the first line of code (above t.executesql) but I do not understand the rest.

    Then before you display "item" object's keys; just clear out the innerHTML and set-up the article's innerHTML; to display each of your "item" object's keys, so that they will be displayed in the article tag.
    How would I go about doing that?

    Also, I pasted the wrong code that I am using. (items.push...) is my old code. Below is what I am using to display it in the <article>

    Code:
    $('#page2 article').html('<p><div id="pop"><div class="question"><strong>' + row.question + '</strong><br><br><input class="' + row.answera + '" type="radio" name="quest" value="a" onclick="rad' + row.answera + '()"/><label> ' + row.A + '</label><br><br><input class="' + row.answerb + '" type="radio" name="quest" value="b" onclick="rad' + row.answerb + '()"/><label> ' + row.B + '</label><br><br><input class="' + row.answerc + '" type="radio" name="quest" value="c" onclick="rad' + row.answerc + '()"/><label> ' + row.C + '</label><br><br><input class="' + row.answerd + '" type="radio" name="quest" value="d" onclick="rad' + row.answerd + '()"/><label> ' + row.D + '</label><br><br></div></div></p>' );

    <article id="quest1"></article>


    Thanks for your help.
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    If you eliminated the "items" object; there is no need to iterate threw each key now, which is basically what I was trying to tell you to do. Your jQuery should set the content, that you are wanting to display.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    I am displaying 1 question at a time with radio buttons using the following code. I am just not sure how to add the preloaded since the first time it pulls a question take a little while.

    Code:
     t.executeSql('SELECT id, question, A, answera, B, answerb, C, answerc, D, answerd FROM notes WHERE id = ' + rand + ' LIMIT ?',
                                    [trNotes.limit],
                                    function(t, result) {
                                    var row = result.rows.item(0),
                                    opts = {};
                                    
                                 
                                 
                                      $('#page2 article').html('<p><div id="pop"><div class="question"><strong>' + row.question + '</strong><br><br><input class="' + row.answera + '" type="radio" name="quest" value="a" onclick="rad' + row.answera + '()"/><label> ' + row.A + '</label><br><br><input class="' + row.answerb + '" type="radio" name="quest" value="b" onclick="rad' + row.answerb + '()"/><label> ' + row.B + '</label><br><br><input class="' + row.answerc + '" type="radio" name="quest" value="c" onclick="rad' + row.answerc + '()"/><label> ' + row.C + '</label><br><br><input class="' + row.answerd + '" type="radio" name="quest" value="d" onclick="rad' + row.answerd + '()"/><label> ' + row.D + '</label><br><br></div></div></p>' );
                                    
         })
                                    
      }) 
    });
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    I am not sure if you can find a way to check the readyState of executeSQL(); as I have never really used Web Sockets, but you might try something along these lines:
    Code:
    t.executeSql('SELECT id, question, A, answera, B, answerb, C, answerc, D, answerd FROM notes WHERE id = ' + rand + ' LIMIT ?',
                                    [trNotes.limit],
                                    function(t, result) {
                                    var row = result.rows.item(0),
                                    opts = {};
                                    
                                 if (row == undefined) {
       				  $('#page2 article').html('Loading Results - Please Wait...');
    		             }
    			     else {                             
                                      $('#page2 article').html('<p><div id="pop"><div class="question"><strong>' + row.question + '</strong><br><br><input class="' + row.answera + '" type="radio" name="quest" value="a" onclick="rad' + row.answera + '()"/><label> ' + row.A + '</label><br><br><input class="' + row.answerb + '" type="radio" name="quest" value="b" onclick="rad' + row.answerb + '()"/><label> ' + row.B + '</label><br><br><input class="' + row.answerc + '" type="radio" name="quest" value="c" onclick="rad' + row.answerc + '()"/><label> ' + row.C + '</label><br><br><input class="' + row.answerd + '" type="radio" name="quest" value="d" onclick="rad' + row.answerd + '()"/><label> ' + row.D + '</label><br><br></div></div></p>' );
                                 }
                                    
         })
                                    
      }) 
    });
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    I just tried that and no dice. I think it is because it comes after the sql statement (which takes up the time). When the sql statement is finished it immediately goes to the 'ELSE' since the result is not null.
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Is that your full code? If not, can you post your full code? If you are defining a new WebSocket(); you should be able to check the onopen, onmessage, and onclose events (as defined by w3.org: here and... here) and add preloading message this way. It also provides a readyState of 0 (connecting), 1 (open), 2 (closing), or 3 (closed); which you may also be able to take advantage of displaying a preloading message, in this fashion.
    Last edited by web_loone08; June 11th, 2013 at 10:17 PM.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    Yes, that's my full sql/display results code. The code on my HTML page is

    <article id="quest1"></article>

    I've never worked with websockets before.
  18. #10
  19. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Originally Posted by cjackson11
    Yes, that's my full sql/display results code. The code on my HTML page is

    <article id="quest1"></article>

    I've never worked with websockets before.
    It might be a good idea; to do an online search for "HTML5 WebSockets", so you can get an idea of what you are trying to do and how to do it.
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    Will do, thanks!

    Comments on this post

    • web_loone08 agrees : Np, good luck ;)
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    38
    Rep Power
    2
    Ooooh, somethings are just too simple. I got it working trying something I didn't think would work. All I did was place the loading text between the <article> tags. Once the results are returned the text is replaced by the data. I'm not entirely sure why that works though.

    <article>Loading questions, please wait...</article>

    Thanks for your help. Now I know I need to learn about web sockets too.

IMN logo majestic logo threadwatch logo seochat tools logo