Dynamically adding elements to jQuery Mobile , when these elements are retrieved Asynchronously?

Question

The idea is to develop a simple jquery Mobile Site that imports the photo albums and the photos from a public facebook page and show them to the user.

I am using the Javascript SDK of Facebook and i can successfully retrieve all the information i need from the page , as photo albums names , links to the photos etc.

The only thing i am missing here is how to dynamically add all these to my web site. What i mean is i need every time to be able to check how many albums i have and how many photos on each album and then create a listView in jQuery Mobile with all the album names.

The problem:

I know how to add dynamically elements to a listView with jQuery Mobile. However in this case , the "data" eg the album names are fetched asynchronously through the facebook SDK and by the time my page loads the variables that supposedly store this data are empty!

In the picture here!(sorry not enough rep to post here) i try to add an album name in my listView but the result is disappointing

As you can see the variable that holds the album name is "Undefined" because the asynchronous call hasnt been completed yet.. (Dont mind the error is just the thumbnail photo missing)

This is the code that i wrote :

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <title>CityInfo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head> 

<body> 

    <div id="fb-root"></div>
    <script>

        var albumName = new Array();
        var albumId = new Array();
        var albumCover = new Array();   

        window.fbAsyncInit = function() {
            // init the FB JS SDK
            FB.init({
                appId      : '564984346887426',                    // App ID from the app dashboard
                channelUrl : 'channel.html',                       // Channel file for x-domain comms
                status     : true,                                 // Check Facebook Login status
                xfbml      : true                                  // Look for social plugins on the page
            });

            // Additional initialization code such as adding Event Listeners goes here
            FB.api('593959083958735/albums', function(response) {
                if(!response || response.error) {
                    // render error
                    alert("Noo!!");
                } else {
                    // render photos
                    for(i=0; i<response.data.length; i++){
                        albumName[i] = response.data[i].name;
                        albumCover[i] = response.data[i].cover_photo;
                        albumId[i] = response.data[i].id;                       
                    }
                }
            });

        };

        // Load the SDK asynchronously
        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_US/all.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        $(document).ready(function(){
            $("ul").append('<li><a href="testFile.HTML" data-transition="slidedown"> <img src="photo.png"/> <h2>' + albumName[0] + '</h2> <p> Test Paragraph</p></a></li>').listview('refresh');
        });

    </script>



    <div data-role="page" id="home" data-theme="c">
        <div data-role="content">
            <h2 id="banner" align = "center">Photo Albums</h2>
            <ul data-role="listview" data-inset="true"> 

            </ul>

        </div>
    </div>

</body>
</html>

As you can see i implement the javascript SDK , i get the albumNames , Ids , etc (When i alert these variables they have all the data expected! Does alert actually wait for the asynchronous call to be completed?). Then i use jQuery to add an element on my listView , but the variable is empty(undefined as you saw).

So what am i really missing here? Where should i put my jQuery code so that it actually waits for the asynchronous calls to be completed.

dont use `.ready` in jQuery Mobile. Replace it with `pageinit` or any other jQM events http://api.jquerymobile.com/category/events/ — Omar, Jun 19 '13 at 13:01

Ouadie · Accepted Answer · 2013-06-19T12:13:03.237

just put

$("ul").append('<li><a href="testFile.HTML" data-transition="slidedown"> <img src="photo.png"/> <h2>' + albumName[0] + '</h2> <p> Test Paragraph</p></a></li>').listview('refresh');

in:

FB.api('593959083958735/albums', function(response) {
  if(!response || response.error) {
     // render error
     alert("Noo!!");
  } else {
    // render photos
    for(i=0; i<response.data.length; i++){
       albumName[i] = response.data[i].name;
       albumCover[i] = response.data[i].cover_photo;
       albumId[i] = response.data[i].id;

       $("ul").append('<li>'+
                        '<a href="testFile.HTML" data-transition="slidedown">'+
                          '<img src="photo.png"/>'+
                          '<h2>' + albumName[0] + '</h2>'+
                          '<p> Test Paragraph</p>'+
                        '</a>'+
                     '</li>')
             .listview('refresh');
    }
  }
 });

Does alert actually wait for the asynchronous

There is no, asyn or sync function in jQuery, you should put your code in the right place, here you have to show the list just after the response of facebook API.

great ! Thanks a lot ! So i dont need to use at all the $(document).ready(function(){} ? — Johny Jaz, Jun 19 '13 at 14:31
no don't use it, check this http://stackoverflow.com/questions/14468659/jquery-mobile-document-ready-vs-page-events — Ouadie, Jun 19 '13 at 14:35

score 0 · Answer 2 · answered Jun 19 '13 at 11:50

Try to populate your list where you're building your albums arrays.

var myList = $("ul"); // better save this in a var
for (i=0; i<response.data.length; i++) {
  myList.append('<li><img src="' + response.data[i].cover_photo + '" /><h2>' + response.data[i].name + '</h2></li>').listview('refresh');
}

Also, it seems you won't need these data arrays anymore unless you plan to do some additional things with it.

Dynamically adding elements to jQuery Mobile , when these elements are retrieved Asynchronously?

2 Answers2