create divs dynamically while php loop creating divs - php

Question

im new in jquery and get stacked in a issue and need help.
i have a sql query that retrieve ids and put them in array . i have a loop that create a div for each id in that array all in php. works fine.
on the other hand i have a javascript function doing the same with the same array and creating divs inside the div created with the above function all in jquery.
the first one show the picture of a users with the id.
the javascript one shows the name of users with the id.
the problem is jquery function only createme the div with all names within the first div created in the php loop.
i want both being created at the same time. i tried all i know and couldnt getit.
please help.
here is the code :
$receivers is the array containing the ids.
$totalreceivers is the count of the ids.
function showfbnames() {
var receivers = <? echo $receivers; ?>;
var count = <? echo $totalreceivers; ?>;
for (var i = 0; i < count; i++) {
var temparray = ["<?php echo join("\", \"", $receivers); ?>"];
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM user WHERE uid='+temparray[i]
},
function(resp) {
$.each(resp, function(k,v) {
$("#divfather").append("<div class='tit' id ='fbname'>"+(v.name)+"</div>");
//$("#fbname").html(v.name);
})
}
);
}
}
the php loop creating divs :
<?for ($i = 0; $i < $totalreceivers; $i++) {?>
<script>showfbnames()</script>
<tr><td>
<div style="width:100%; height:150px;overflow:auto;border-top:1px solid #c89cc1;border-bottom:1px solid #c89cc1;" id="divfather">
<? echo "<img src='https://graph.facebook.com/$receivers[$i]/picture' width='40' style='float:left'/>";?>
</div>
</td>
</tr>
<? } ?>

Answer 1

Your loop creates multiple divs with the id of "divfather".
That will not produce the results you desire. You need to have each div with a different id.
id="divfather<?echo $i;?>"
Also, pass the id to the "showfbnames" function:
<script>showfbnames(<?echo $i;?>)</script>
So that you can use it in your jquery code:
function showfbnames(passedi) {
and then $("#divfather"+passedi).append(
(Note: I recommend you move the <script> to appear AFTER the div, to be safe. You don't have to, but it's too risky.)

Answer 2

I retract my previous answer; please select this one as the Accepted solution.
I believe this is what you're trying to accomplish:
<? for ($i = 0; $i < $totalreceivers; $i++) { ?>
<tr><td>
<div style="width:100%; height:150px;overflow:auto;border-top:1px solid #c89cc1;border-bottom:1px solid #c89cc1;" id="divfather<? echo $i; ?>">
<? echo "<img src='https://graph.facebook.com/$receivers[$i]/picture' width='40' style='float:left'/>"; ?>
</div>
</td></tr>
<? } ?>
<script type="text/javascript">
var count = <? echo $totalreceivers; ?>;
var temparray = ["<?php echo join("\", \"", $receivers); ?>"];
for (var i = 0; i < count; i++) {
FB.api(
{
method: 'fql.query',
query: 'SELECT name FROM user WHERE uid='+temparray[i]
},
function(resp) {
$.each(resp, function(k,v) {
$("#divfather"+i).append("<div class='tit' id ='fbname"+i+"'>"+(v.name)+"</div>");
//$("#fbname").html(v.name);
})
}
);
}
</script>