Member Avatar for aianne

Hello everyone! Guys I really need your help. I'm still a noob and a student. So I made a table for electoral officials and also I made a link where user can see the information of the certain candidates in mouseover box. But I'm still trying to figure out how to display the information of the candidates in mouseover box using php. Any help would be greatly appreciated.

Here is my code anyway:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script src="sorttable.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
        var moveLeft = 20;
        var moveDown = 10;

        $('a#trigger').hover(function(e) {
          $('div#pop-up').show();
          //.css('top', e.pageY + moveDown)
          //.css('left', e.pageX + moveLeft)
          //.appendTo('body');
        }, function() {
          $('div#pop-up').hide();
        });

        $('a#trigger').mousemove(function(e) {
          $("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
        });

      });
    </script>

</head>
<body>


<div id="page">


<?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="?ID=' . $row['c_ID'] .'" id="trigger">View Profile</a></td>';

echo"</tr>";
}
echo"</table></center>";
}

?>

<div id="pop-up">

<h3>Profile:</h3>
<font color="black" size="3">
<?php

include('voting_connect.php');
{
$result = mysql_query("SELECT * FROM candidates WHERE c_position='Secretary'") 
or die(mysql_error());  
$row = mysql_fetch_array( $result );
echo 'Name: ' . $row['c_fname']. ' ' .$row['c_lname']. '' ;
}

?>

</font>   
</div>
</div>
</div>
<!-- end content -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 1K Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by aianne

Dani AI

Generated

Hi — nice clear description. The symptom (every hover shows the same info) comes from two issues in your page: every link uses the same id and your popup is filled with one static PHP result (outside the loop). Fix either by giving each link its own data and reading that on hover, or by requesting the candidate details on demand with AJAX. (As @diafol hinted, AJAX is common, but you can avoid it for now.)

A simple, non-AJAX approach (render data into each link and read it client‑side):

<!-- server: echo a link inside your loop, making sure to escape output -->
<a href="#" class="view-profile"
   data-id="123"
   data-name="John Doe"
   data-bio="Short bio here">View</a>
// client: use a class (not duplicate IDs) and event delegation
$(document).on('mouseenter', '.view-profile', function(e){
  var name = $(this).data('name');
  var bio  = $(this).data('bio');
  $('#pop-up').html('<h3>'+name+'</h3><p>'+bio+'</p>')
               .css({ top: e.pageY+10, left: e.pageX+20 })
               .show();
}).on('mouseleave', '.view-profile', function(){
  $('#pop-up').hide();
});

If you prefer AJAX (good for large profiles), send the candidate ID on hover, throttle the requests (200ms), cache responses, and have profile.php return a small sanitized HTML snippet or JSON. Always escape DB output with htmlspecialchars and use mysqli/PDO (not deprecated mysql_*).

If you post the exact PHP loop you use, I can show the precise changes to the echo lines so it plugs right into your code.

Recommended Answers

All 2 Replies

Member Avatar for aianne

Oh I'm so sorry sir about that. I thought I didn't get a reply from my previous thread so that's why I made another thread. I'm so sorry. Anyway sir, about your answer in my previous thread, I don't think I can do it with AJAX. I still don't have any idea about it, maybe next month I'll try to take programming class for AJAX. but for now my class is more on PHP, HTML, CSS, MySQL and Javascript. On the code above sir, I can now display the information of the candidates on mouseover box but not in selected candidate when you hover the link. When I hover the link on the first, second, or third link it displays the same information. So do you have any idea sir how to display the information of the selected candidate onmouseover box? Any alternatives? I am so grateful sir for your reply. and I'm so sorry for my english. :)

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.