Use Json And Display Data

I have a popup which is displayed on clicking a name in this leaderboard :https://jsfiddle.net/pvwvdgLn/1/ There are various fields in the popup like :Name,Email,Date of birth etc

Solution 1:

Perhaps you should consider using AJAX to fetch additional data. When you print out the list of names do the following:

<?php$sql = "SELECT top 10 Employ‌​eeID, EmployeeName, pointsRe‌​warded
          FROM pointsBadgeTable
          WHERE WeekNumber ='week51'
          ORDER BY pointsRewarded desc";

  if(($stmt = sqlsrv_query($conn, $q1)) != false){
    do {
      while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
        $result[] = $row;
      }
    } while (sqlsrv_next_result($stmt));

    foreach($resultas$row){
      echo'<li><mark data-id="'.$row['EmployeeID'].'">'. $row['EmployeeName']. '></mark><small>'.$row['pointsRe‌​warded'].'</small></li>';
    }
  } else {
    // sql error.
  }

?>

Then in your JS:

$('.leaderboard li').on('click', function () {
  var e = $(this);
  $.ajax({
    url: "./requestuserdata.php", // your script above a little adjustedtype: "POST",
    data: {id:e.find('mark').data('id')},
    success: function(data){
      $('#popup').fadeIn();
      $('#popup-name').text('Name: ' + data.EmployeeName);
      // etc ..
    },
    error: function(){
      alert('failed, possible script does not exist');
    }
  });
});

Then in your PHP file requestuserdata.php must contain the following code:

if(isset($_POST['id']) && is_numeric($_POST['id'])){
  $q1 = "select *
         from pointsBadgeTable
         WHERE WeekNumber ='week51' AND Employ‌​eeID = '".$_POST['id']."'
         order by pointsRewarded desc";
  // and convert it to JSON like your script above so your javascript does the rest.die(json_encode($result));
} else {
  header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500);
}