Use JSON and Display data

Question

I have a popup that appears when I click a name in this leaderboard: https://jsfiddle.net/pvwvdgLn/1/

The pop-up window has various fields, such as: name, email address, date of birth, etc., which I want to display for the corresponding person whose name the user clicked.

I have below json that extracts to me an array that contains all this data of all the people in the list:

<?php session_start(); $servername = "xxxxx"; $connectioninfo = array( 'Database' => 'xxxxxxxxxxxxx' ); $conn = sqlsrv_connect($servername, $connectioninfo); if (!$conn) { echo 'connection failure'; die(print_r(sqlsrv_errors() , TRUE)); } $q1 = "select top 10 * from pointsBadgeTable WHERE WeekNumber ='week51' order by pointsRewarded desc"; $stmt = sqlsrv_query($conn, $q1); if ($stmt == false) { echo 'error to retrieve info !! <br/>'; die(print_r(sqlsrv_errors() , TRUE)); } do { while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) { $result[] = $row; } } while (sqlsrv_next_result($stmt)); sqlsrv_free_stmt($stmt); sqlsrv_close($conn); //Close the connnectiokn first //Set content type to json header('Content-Type: application/json'); //Echo a json object to the browser echo json_encode($result); ?> As can be seen in the query,it fetches JSON for all the top10 ,whose names can be seen in the list. 

html and popup related JS are here: https://jsfiddle.net/woef5mn6/

How to display the corresponding data in a popup from JSON only for the person whose name is clicked?

please help me.

Answer 1

Perhaps you should consider using AJAX for more data. When you print a list of names, follow these steps:

 <?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($result as $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 adjusted type: "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, your requestuserdata.php PHP requestuserdata.php should 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); }