Question

I really couldn’t find a good way to title this so I apologize if it’s misleading, but what I’m trying to do is I have badges that players earn and I want them to be able to click on the badges and based on the badge they click get a different description to load using jquery. I already have it partly working, but the problem I’m having is it only gets the last badge’s info. I know why it does this (I think, php is loaded first in page, and it’d need to be an array. Or maybe I just sound really dumb, haha) Here is what my code is so far:

    <table id="table-profile" width="78%">
  <tr>
    <td><h3><?php echo "$usernameprofile";?>'s Badges (work in progress!!!!!!!) |  <a href="#">View All</a></h3></td>
  </tr>
  <tr>
    <td><?  
 $sqlbadges = mysql_query("SELECT * FROM membersbadges WHERE username='$usernameprofile' LIMIT 8 
 ");
 $checkbadges = mysql_num_rows($sqlbadges);
 if($checkbadges == "0"){
     echo "User is currently badgeless";
 }else{
?>
<table width="100%">
<?php
$tableCount = 0;
    $tableRowOpen = false;
    while($rowbadge = mysql_fetch_assoc($sqlbadges)) { 
    $bid = $rowbadge['badgeid'];

    $getbadge = mysql_query("SELECT * FROM badges WHERE id='$bid'");
while($rowbadge2 = mysql_fetch_assoc($getbadge)){
$badgeid = $rowbadge2['id'];    
$badgename = $rowbadge2['name'];
$badgedesc = $rowbadge2['description'];
$badgereward = $rowbadge2['reward'];
$badgerequirements = $rowbadge2['requirements'];
$badgepic = $rowbadge2['image'];
$date = strftime("%b %d, %Y", strtotime($rowbadge2['date']));

}
        if($tableCount == 0){
            echo "<tr>";
            $tableRowOpen = true;
        }
        echo"<td width='25%'>";
        echo  "<badge".$badgeid.">
<img src=\"http://my.iheff.net/images/badges/".$badgepic.".png\" border=2 alt=\"
        " . $row["name"] . "\" height=40px width=40px></a></badge".$badgeid.">" ;

        echo"<br/><br/></td>";
        if($tableCount + 1 == 4){
            $tableCount = 0;
            echo "</tr>";
            $tableRowOpen = false;
        }
        else{
            $tableCount++;
        }

    }
    if($tableRowOpen){
        echo "
</tr>
";
    }
    echo"
    <table id='badgeinfo".$badgeid."' style='display:none' width='80%' border='0' cellspacing='5' cellpadding='10'>
  <tr>
    <th colspan='2' scope='col'>".$badgename."</th>
    </tr>
  <tr>
    <td>Description:</td>
    <td>".$badgedesc."</td>
  </tr>
  <tr>
    <td>Reward:</td>
    <td>+".$badgereward." Experience</td>
  </tr>
</table>
    ";
?>
</table>
<?
 }
 ?></td>
  </tr>

</table>

<script>
$("badge<?php echo "$badgeid"?>").click(function () {
$("#badgeinfo<?php echo "$badgeid"?>").toggle("slow");
});    
</script>

Sorry for the messy code, I’m nowhere near a php whiz. But, I will appreciate any help. Thanks!

Here’s an example page if you want to see how the page looks live. http://my.iheff.net/profile.php?id=1637

Answer 1

It looks like you’re closing the while loop too quickly. (It’s looping through all the records, and assigning them, but not rendering them.) So put all the badge rendering logic inside this loop:

while($rowbadge2 = mysql_fetch_assoc($getbadge)){
    $badgeid = $rowbadge2['id'];    
    $badgename = $rowbadge2['name'];
    $badgedesc = $rowbadge2['description'];
    $badgereward = $rowbadge2['reward'];
    $badgerequirements = $rowbadge2['requirements'];
    $badgepic = $rowbadge2['image'];
    $date = strftime("%b %d, %Y", strtotime($rowbadge2['date']));

    // render the row here
}

To fix the Javascript issue, you could add the Javscript inside the loop, but it’s probably better to add attributes to the badge tags:

echo  "<badge".$badgeid." data-type='badge' data-id='".$badgeid."'">"

That way you can use a single (static) block of Javscript to construct the click events:

// select all the badge tags
$("[data-type=badge]").each(function() {
    // get the id for the current badge
    var thisId = $(this).attr('data-id');
    $(this).click(function() {
        $("#badgeinfo" + thisId).toggle("slow");
    });
});