Member Avatar for aianne

Hello everyone! :) Could you please help me? I am still a noob and I'm having a hard time about displaying selected values from mysql database into popup window? This is my code where user can see the table of the electoral officials:

-----CUT-----

<div id="page">
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" name="bio" onclick="popup('popUpDiv')">Close</a>
</div>

<?php
include('voting_connect.php');
{
$result = mysql_query("SELECT * FROM candidates WHERE c_position='Secretary'") 
or die(mysql_error());  

echo "<center><table id='tables' class='sortable'>";
echo "<tr><th>Secretary:</th></tr>";
while($row = mysql_fetch_array( $result )) {               
echo "<tr>";
$row['c_ID'];
echo '<td>' . $row['c_fname'] . ' ' . $row['c_lname'] .'</td>';
echo '<td><a href="cand.php?ID=' . $row['c_ID'] .'" name="bio" onclick="popup("popUpDiv")">View Profile</a></td>';
echo"</tr>";
}
echo"</table></center>";  
}
?>

-----CUT-----

What I want to do is when the user clicks on the "View Profile", a pop up window opens with the information of the selected candidate that stored in the content field of the database. Do you have any idea? I hope you can help me with this. Any help would be greatly appreciated.

  • 2 Contributors
  • 1 Reply
  • 4K Views
  • 58 Minutes Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

aianne, two quick wins before the popup logic: your inline onclick has mismatched quotes (onclick="popup("popUpDiv")"), and the old mysql_* API you are using is long-deprecated/removed. Switch to mysqli or PDO, and either fix the quoting or (better) move the handler to JavaScript. See the PHP note on the deprecated mysql extension and use prepared statements for safety. PHP mysql extension status. PDO prepared statements. (php.net)

If you like diafol’s option #2 (Ajax), expose a tiny endpoint that returns one candidate as JSON. Example cand.php:

<?php
// cand.php
require 'voting_connect.php'; // create $pdo = new PDO(...)

header('Content-Type: application/json; charset=UTF-8');

$id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT);
if (!$id) { http_response_code(400); echo json_encode(['error'=>'bad id']); exit; }

$stmt = $pdo->prepare('SELECT c_fname, c_lname, content FROM candidates WHERE c_ID = ? LIMIT 1');
$stmt->execute([$id]);
$row = $stmt->fetch(PDO::FETCH_ASSOC);

echo $row ? json_encode($row) : json_encode(['error'=>'not found']);

On the list page, give each link a data-id and let JS populate the modal:

<a href="cand.php?id=123" class="view-profile" data-id="123">View Profile</a>
<script>
document.addEventListener('click', async (e) => {
  const a = e.target.closest('.view-profile');
  if (!a) return;
  e.preventDefault();
  try {
    const id = a.dataset.id;
    const res = await fetch(`cand.php?id=${encodeURIComponent(id)}`);
    if (!res.ok) throw new Error(res.status);
    const p = await res.json();
    document.getElementById('popUpDiv').innerHTML =
      `<a href="#" class="close">Close</a>
       <h3>${p.c_fname} ${p.c_lname}</h3>
       <div>${p.content}</div>`;
    popup('popUpDiv');
  } catch(err) { alert('Could not load profile.'); }
});
</script>

Tips: if you render any DB text into HTML (e.g., names), escape it server-side with htmlspecialchars() to avoid XSS; or set via textContent in JS. htmlspecialchars manual. For Ajax basics, MDN’s Fetch guide is a solid reference. Using Fetch. (php.net, developer.mozilla.org)

Member Avatar for Member #120589

Few ways you can do this.
My faves:

1) Either get ALL the info from the DB on page load and place it into a json object, so you never have to mess with the server/DB again - js populates the popup
2) Use Ajax to dynamically populate the popup

JS required either way for these solutions.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.