Change MySQL Result on Hover

Question

I am making a tooltip for World of Warcraft items. wowhead.com has a similar plugin, but they are using JavaScript for the whole plugin. So, I want to make it so when I hover over a paragraph, the MySQL query in my script should change. And it should get a value from input hidden. So, my form looks like this:

<form action="functions/itemvar.php" method="POST">
<p class="name">Random Item Name</p>
<input type="hidden" id="entry1" name="entry" value="12345">
</form>

And my SQL Query looks like this:

SELECT * FROM item_template WHERE entry = 12345

So, The entry in MySQL query from PHP script should change when you hover over the paragraph tag. So the MySQL query gets the result from input hidden.

I do use variable for the entry I just wrote 12345 temporary.

Answer 1

You can do this with jQuery and Ajax. Assign a custom class to each paragraph you want to bind the hover event. Then catch that class with jQuery, and execute an AJAX call on hover to a PHP script that provides the query result.

Answer 2

What have you tried so far?
All you need is send AJAX request to php file on hover event, right?

1. $.hover()
2. $.get()

plus SQL Injection!

Answer 3

It sounds like you need a few things to get this working; overall, you need a way of:

• Detecting that the client has hovered over your item name
• Getting the hidden value client-side (i.e. in the browser)
• Sending the hidden value to the server
• Dealing with the response (e.g. drawing the tooltip)

The html you've posted is pretty close to achieving that, but I'd guess that you will have multiple item links within one page. With that in mind, you could first simplify your markup like so:

<p class="name item-hover-link" data-item-id="12345">
    Barman's Shanker
</p>

Now your html contains all the necessary information. However, the version you've posted is also fine, it just contains alot of stuff you don't necessarily need to achieve the particular goal you stated.

Next, we'll use jQuery to detect if you hover over an item. Note: many web developers will tend use jQuery rather than raw javascript, especially for ajax-related stuff. I'm especially lazy, so I'm opting for it also.

Make sure this jQuery/javascript either comes after your html or is booted in an onLoad event; otherwise, it won't be able to find any ".item-hover-link" elements.

function drawTooltip(data) {
    // Google different tooltip drawing implementations
    // I'd be amazed if there isn't a 'WoW-style' tooltip
    // guide somewhere out there
}

$(".item-hover-link").hover(
    function() {
        // Mouse entering the link

        // $this refers to the <p> that was hovered over
        var $this = $(this);

        // Check if any previously-loaded item data has been stored
        // e.g. they have hovered over it before
        var loadedItemData = $this.data("loaded-item-data");

        if(loadedItemData !== undefined){
            // It's been previously loaded! Use that data to draw
            // a tooltip, no need for a server round-trip
            drawTooltip(loadedItemData);
        }
        else {
            // It hasn't been loaded before, you need to GET it
            // from the server

            // Here's where data-item-id="12345" comes in
            var id = $this.data("item-id");

            var request = "/functions/itemvar.php?id=" + id;

            $.get(request, function(data) {
                // Your php is generating the response, do whatever
                // with it here, I'll assume you didn't touch it.

                drawTooltip(data);

                // And cache it, to prevent another round trip if they
                // re-hover (care for memory leaks though)
                $this.data("loaded-item-data", data);
            });
        }

    },
    function() {
        // Mouse leaving the link, you should use this
        // area to remove any initialized stuff while doing
        // your round-trip (loading animations, get requests,
        // tooltips, etc)
        hideTooltip();
    }
);

This kind of approach should get you most of the way there. However, you'll need to make sure your back end complies with the request (I'm assuming it's a GET request for tooltip stubs?). Also, you'll need a method for drawing a custom tooltip, much like wowdb and thottbot (is that still trendy with the kids these days?). I'd reccomend something like jQueryUI tooltip if you want a quick solution or check out the various approaches to tool-tipping in google.