CODEWITHSUNDEEP
javascriptfacebook-graph-apiasynchronouscallbackphoto-gallery
Wesley Jeftha
Wesley Jeftha

Reputation: 153

Facebook Graph Asynchronous Callback Issue

Ok, been breaking my head over this one for a few days. This is the problem:

  1. I am using Facebooks API to retrieve pictures from a specific Album.
  2. Using JCarousel (http://sorgalla.com/projects/jcarousel/), I would like to dynamically add the pictures from Facebook into the Carousel.
  3. The problem is, that because the Facebook API is Asynchronous, the portion of code which executes the Carousel requires information (picture URLs) which is not yet available.

A workaround of some sort is to use an alert box to force a delay, this allows the Facebook API query to "catch up" when you confirm the alert, lo and behold, the images appear inside the carousel!

Is there anyway at all to solve this isuse. After research, I have seen similair problems addressed using a "Callback" function.

I am a rank novice with coding, so any help would be hugely appreciated.

I am trying to modify this page to stream facebook images: http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html

Also in order to make this work you will also need the facebook Javascript SDK script

 <script src="//connect.facebook.net/en_US/all.js"></script>

You will also need Jquery.

Finally, below is a sample of my code, the portion that is not working:

$(document).ready(function() {
//the below is an Asynchronous request to facebook

FB.api('/232137976851458' + '/photos', function(response) {
for (i=0;i<=response.data.length;i++)
    {
    mycarousel_itemList[i] =  {url: response.data[i].picture, title: "2"};
    }
});

//the alert below is used as a forced break to allow the api to stream the required information, if we remove this alert, the images refuse to load into the carousel

alert("test");

//after the pictures are retrieved from the facebook API, the mycarousel_itemList array will be used to dynamically add the pictures into a carousel.....the code to instantiate the carousel is below

jQuery('#mycarousel').jcarousel({
    size: mycarousel_itemList.length,
    wrap: "circular",
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
});

});

Upvotes: 0

Views: 932

Answers (2)

Wesley Jeftha
Wesley Jeftha

Reputation: 153

Thanks so much for the speedy reply DMCS - the above did not acually work, but it did give me an idea, which eventually led me to the solution.

When I put the instantiation of the Caroussel inside the For Loop, it worked, becuse the Carousel itself dimensions the ammount if items based on the length of the array, which is reset at each step in the for loop, so it overwrites with the most current information off the api asynchronous request. Here is the working answer:

FB.api('/232137976851458' + '/photos', function(response) {
    for (i=0;i<=response.data.length;i++)
    {
        mycarousel_itemList[i] =  {url: response.data[i].picture, title: "2"};

        jQuery('#mycarousel').jcarousel({
            wrap: "circular",
            size: mycarousel_itemList.length,
            itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
        });
    }       
})

Upvotes: 0

DMCS
DMCS

Reputation: 31880

No alert is necessary if you move the jcarousel call into the callback

   FB.api('/232137976851458' + '/photos', function(response) {
        for (i=0;i<=response.data.length;i++)
        {
            mycarousel_itemList[i] =  {url: response.data[i].picture, title: "2"};
        }

        jQuery('#mycarousel').jcarousel({
            size: mycarousel_itemList.length,
            wrap: "circular",
            itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
        });

    });

Upvotes: 1

Related Questions