Query MySql DB on image hover and update page without refreshing

Question

I am currently putting together a page where I have a list of 15 staff images. I'm trying to configure this so that when a user hovers over the image, a div in the upper-right corner updates with information queried from a MySql DB. For instance, web user hovers mouse over picture of Staff #112 -> Div updates to include height, weight, location, and position from mysql without refreshing. I have researched for a while but can only find how this is done using Ajax, Php, Jquery, and a form element. Any help, tutorials, or information would be greatly appreciated. Thanks!

UPDATE

I ended up changing some of the code that was provided and the final version was:

     <script type="text/javascript">

              $('.staff_hover').on('click', function(){
             id = $(this).attr('id');
              $.post('staff_php.php',{id: id}, function(data) {             var obj = jQuery.parseJSON(data);
                    var staffnum = obj.staffnum;
                       var height = obj.height;
                       var eye = obj.eye;
                    var hair = obj.hair;
                    var abt1 = obj.abt1;
                    var abt2 = obj.abt2; alert(obj.height);
                       $('#staff_info').html('<b>STAFF #</b>: ' + staffnum + ' <br /><b>HEIGHT</b>: ' + height + ' <br /><b>EYE  COLOR</b>: ' + eye + '<br /> <b>HAIR COLOR</b>: ' + hair + '<br /><b>ABOUT</b>:<br /> <b>-</b> ' + abt1 +  '<br/><b>-</b> ' + abt2);
           });
           }); </script>

score 2 · Answer 1 · answered Nov 23 '12 at 21:32

Here is how flow of your application would work with jQuery, PHP,MySQL:

Browser through jQuery would send request to a server.
PHP would receive request do query to MySQL. And return result back.
jQuery would get response and populate div.

So you need PHP script and JavaScript.

Start with PHP and try to get things from db (look in to PHP PDO)

Than look into jQuery.ajax().

Good luck.

cssyphus · Accepted Answer · 2012-11-23T22:02:50.723

1

You will want a structure something like this:

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $('img').hover(function() {
                id = $(this).attr('id');
                $.ajax({
                    type: "POST",
                    url: "ax_get_staff.php",
                    data: 'hovered_id='+id,
                    success:function(data){
alert(data);
                        var obj = jQuery.parseJSON(data);
                        var height = obj.height;
                        var weight = obj.weight;
alert(obj.height);
                        $('#upper_right_div').html('Height is: ' + height + ' and weight is: ' + weight);
                    }
                });
            },function(){
                //Hover-out function
                //Clear your div, or some such
                $('#upper_right_div').html('');
            });
        });
    </script>
</head>
<body>
    <div id="myDiv">
        Hover over picture below to GO:<br />
        <img id="6" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
    </div>
    <div id="upper_right_div"><div>
</body>
</html>

And your AJAX (ax_get_staff.php) file will look like this:

<?php
include 'login_to_database.php';

$id = $_POST['hovered_id'];

$result = mysql_query("SELECT `height`, `weight`, `location` FROM `staff` WHERE `user_id` = '$id'") or die(mysql_error());
$staff = mysql_fetch_assoc($result);
//print_r($staff);
echo json_encode($staff);

?>

edited Nov 23 '12 at 22:02

answered Nov 23 '12 at 21:41

cssyphus

37,875
18
96
111

Because I remember being in his shoes. Code samples were crucial for my understanding. – cssyphus Nov 23 '12 at 22:05
Than give proper answer and not mysql_* that is going to get deprecated soon. Plus code is opened to mysql injection. And that person put 0 effort in trying things. whathaveyoutried.com – E_p Nov 23 '12 at 22:11
E_p - This person actually put a lot of work in trying things. Providing that allowed me to go through line by line and see what was happening. Gibberish thanks for your help. – Elec Boothe Nov 23 '12 at 22:12
@Elec Boothe no offence googling!==trying – E_p Nov 23 '12 at 22:15
Not arguing with you, as you have no idea what I tried or didn't try. I didn't ask for code either, I asked for assistance - "help, tutorials, or information". :) – Elec Boothe Nov 23 '12 at 22:17
@E_p I agree with your principles, but I remind you what it was like when you were first learning and needing to get a job done. We don't all have the opportunity of a classroom learning environment; I sure didn't. For me, it was trial by fire and I learned as I worked, on ly succeeded because others were generous with their assistance. Your response was valuable and insightful, but if I was in Elec's shoes, it was not enough _for me_. I therefore provided what I myself would have needed. I'm sorry that we don't see eye to eye on this but +1 for your fishing admonition. – cssyphus Nov 26 '12 at 18:33

Query MySql DB on image hover and update page without refreshing

2 Answers2

Linked