...

View Full Version : [need help]Displaying results in sets of 5 with a next button for friends.getAppUsers



hopelesscoder
09-18-2011, 08:37 AM
I have been searching for a way to display facebook api friends.getAppUsers in set of 5.

I am able to do this if i hard code it but I cant seem to find and comprehend a method to do this dynamically.

What i want to achieve is, if i have 43 friends using the application, the code should allow users to view this result in set of 5.

-prevBtn- friend1 friend2 friend3 friend4 friend5 -nextBtn-

upon clicking on the nextBtn,

-prevBtn- friend6 friend7 friend8 friend9 friend10 -nextBtn-

etc

i am actually relatively new to Javascript and Facebook Codings.. so any help would really be great! Thanks!

here are my codes:


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

<table width="750px" height="185px" background="Image/friends.jpg">
<tr>
<td align="right">
<a href="#"onClick="prev();return false"><img src="Image/prevFriend.jpg" width="36" height="154"></a>
</td>
<td width="89%">
<div id="profile_pics" align="left"></div>
</td>
<td>
<a href="#" onClick="next();return false">Image/nextFriend.jpg" width="36" height="154"></a>
</td>
</tr>
</table>
</div>



<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
var profilePicsDiv = document.getElementById('profile_pics');
var NameDiv = document.getElementById('name');
var containDiv = document.getElementById('container');
FB.init({ appId: 'xxxxxxxxxxxx', status: true, cookie: true, xfbml: true });

FB.Event.subscribe('auth.sessionChange', function (response) {
if (response.session) {
window.location.reload();
} else {
window.location.reload();

}
});
FB.getLoginStatus(function(response) {
if (!response.session) {
profilePicsDiv.innerHTML = '<em></em>';
containDiv.innerHTML = '<em>You are not connected </em> ';

return;

}
FB.api({ method: 'friends.getAppUsers' },
function(result)
{

var markup = '';
var numFriends = result ? Math.min(5,result.length) : 1;
if (numFriends > 0)
{
for (var i=0; i<numFriends; i++)
{
markup +=
(

'<fb:profile-pic size="square" ' +
'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
);

}

}


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

});

function next(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{


var markup = '';

var numFriends = result ? Math.min(10,result.length):1;

if (numFriends > 5)
{
for (var j=5; j<numFriends; j++)
{

markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'

);


}

}

else{
if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{

markup +=
(
'<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic> '

);


}

}

};


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

}

function prev(){
FB.api({ method: 'friends.getAppUsers' },
function(result)
{



var markup = '';

var numFriends = result ? Math.min(5,result.length):1;

if (numFriends > 0)
{
for (var j=0; j<numFriends; j++)
{

markup +=
(
<fb:profile-pic size="square" ' +
'uid="' + result[j] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'

);


}

}


profilePicsDiv.innerHTML = markup;

FB.XFBML.parse(profilePicsDiv);

});

}

Old Pedant
09-18-2011, 08:51 PM
I would do it 100% in JavaScript.

Get the full list of friends into a JS array and then simply display 5 at a time out of the array.

I've never used the facebook api, so the following is just a *GUIDELINE* or concept, but...


FB.api(
{ method: 'friends.getAppUsers' },
function(result)
{
var markup = '';
var numFriends = result ? result : 1; /* ?? would result ever be null??? */
var divNum = 0;
for (var i=0; i < numFriends; i++)
{
if ( i % 5 == 0 )
{
var show = divNum == 0 ? "block" : "none";
markup += '<div id="FBGROUP' + divNum + '" style="display: ' + show + '">';
++divNum;
}
markup +=
'<fb:profile-pic size="square" ' +
'uid="' + result[i] + '" ' + 'facebook-logo="false"' + 'linked="false"' +
'></fb:profile-pic>'
if ( i % 5 == 4 ) markup += '</div>';
);
if ( i % 5 != 0 ) markup += '</div>';
profilePicsDiv.innerHTML = markup;
...

You see it? You will put *ALL* the <fb:profile-pic ... > links (or whatever they are) in place.

But you put them into groups of 5, each group inside a <div>

The ID of the <div>s will be FBGROUP0, FBGROUP1, etc.

And all but the first group will initially be style="display: none;".

So now, in order to move from one group of 5 to the next, you simply change the display of the current group from "block" to "none" and change the display of the next one from "none" to "display".

hopelesscoder
09-19-2011, 03:27 PM
First of all, thank you so much for your reply
but i was just wondering..


The ID of the <div>s will be FBGROUP0, FBGROUP1, etc.
And all but the first group will initially be style="display: none;".

So now, in order to move from one group of 5 to the next, you simply change the display of the current group from "block" to "none" and change the display of the next one from "none" to "display".

if i were to have a 100 friends, won't i need to code 20 different div ids?
Sorry if i misunderstood any part of the code but i think i get what you're driving at.

im really sorry but is it alright to explain this further too?

if ( i % 5 == 4 ) markup += '</div>';
);
if ( i % 5 != 0 ) markup += '</div>';

i understand that the if(i%5 ==4)markup +='</div>' is coded to close the group div because it is going to open another div content upon the next loop.

however i do not understand why there is a need to check if if(i%5 !=0) to close the div outside the for loop .


My knowledge for Javascript is really minimal >.< thank you so much for your patience.

Old Pedant
09-19-2011, 06:49 PM
if i were to have a 100 friends, won't i need to code 20 different div ids?

Yes, but the code will create them all for you.



however i do not understand why there is a need to check if if(i%5 !=0) to close the div outside the for loop .

In case there are *NOT* five in the last group.

If there are, say, only 3 then the (i % 5 == 4) will *NOT* produce the final </div>. So that extra check will tack it on (but won't tack it on if there were exactly 5 in the last <div>).

Not JS, just logic.

hopelesscoder
09-23-2011, 11:39 AM
Thank you very much!! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum