Question

I have a DIV in this data is loaded from the server. I want my JS to execute now only when there is data in the Div. Data is being loaded by Facebook’s API

<Div id='profilePicsDiv' > DATA</div>

JS

$(document).ready(function () {

    FB.getLoginStatus(function (response) {
        var profilePicsDiv = document.getElementById('profile_pics');
        FB.api({
            method: 'friends.get'
        }, function (result) {

            // var result =resultF.data;
            // console.log(result);
            var user_ids = "";
            var totalFriends = result.length;
            // console.log(totalFriends);
            var numFriends = result ? Math.min(25, result.length) : 0;
            // console.log(numFriends);
            if (numFriends > 0) {
                for (var i = 0; i < numFriends; i++) {
                    var randNo = Math.floor(Math.random() * (totalFriends + 1))
                    user_ids += (',' + result[randNo]);
                    randNo++;
                    if (randNo >= totalFriends) {
                        randNo = 0;
                    }
                    // console.log(user_ids);
                }
            }
            profilePicsDiv.innerHTML = user_ids;
        });
    });

}

Now i want after the data is loaded to execute this

$(document).ready(function () {
    var user_ids = document.getElementById('profile_pics').innerHTML;

    if (user_ids == '') {} else

    {
        FB.ui({
            method: 'apprequests',
            message: 'See anyones secret hidden pictures :)',
            to: user_ids,
            ///  How to Fill the ID's HERE ?
        }, requestCallback);
    }
}

function requestCallback(response) {
    // Handle callback here
}

});

But 80% I get the Alert as Blank and 20 % time i get values , Can i do something that this function is executed after its sure to have the data and avoide the 80% chance that its Blank?

Answer 1

Facebook Api does ajax request to fetch results. So, this approach wont help.

Even when window is loaded completely, facebook data wont be there always ( it takes time to request ajax and get the result back from facebook server)

Also, as @jmort253 pointed,

Using window.onload in combination with document.ready is
redundant.Get rid of window.onload and stick to jQuery

Do your logic on facebook api callbacks only.

e.g.

FB.api('/me/friends?fields=name,first_name,gender,picture,relationship_status,birthday', function(response) {
        // Do your logic here

    })

Edit

You should do something like this,

$(document).ready(function () {
   FB.getLoginStatus(function (response) {
    var profilePicsDiv = document.getElementById('profile_pics');
    FB.api({
        method: 'friends.get'
    }, function (result) {

        // var result =resultF.data;
        // console.log(result);
        var user_ids = "";
        var totalFriends = result.length;
        // console.log(totalFriends);
        var numFriends = result ? Math.min(25, result.length) : 0;
        // console.log(numFriends);
        if (numFriends > 0) {
            for (var i = 0; i < numFriends; i++) {
                var randNo = Math.floor(Math.random() * (totalFriends + 1))
                user_ids += (',' + result[randNo]);
                randNo++;
                if (randNo >= totalFriends) {
                    randNo = 0;
                }
                // console.log(user_ids);
            }
        }
        profilePicsDiv.innerHTML = user_ids;
         FB.ui({
        method: 'apprequests',
        message: 'See anyones secret hidden pictures :)',
        to: user_ids,
        ///  How to Fill the ID's HERE ?
       }, requestCallback);

    });
});

});
function requestCallback(response) {
    // Handle callback here
}