CODEWITHSUNDEEP
phpmysqlsqlajax
Elec Boothe
Elec Boothe

Reputation: 90

Query MySql DB on image hover and update page without refreshing

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>

Upvotes: 1

Views: 1750

Answers (2)

cssyphus
cssyphus

Reputation: 40038

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);

?>

Upvotes: 1

E_p
E_p

Reputation: 3144

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

  1. Browser through jQuery would send request to a server.
  2. PHP would receive request do query to MySQL. And return result back.
  3. 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.

Upvotes: 2

Related Questions