Using JQuery to display database information on a hover

Question

Hi guys,
I'm trying to something with JQuery similar to Red Box. I'd like to be able to hover over an entry in a table, and then have a box popup that displays information about that entry pulled from a database.

What I have so far is the ability to select specific elements in the table, and alert when I hover over those elements :)

So my question is: How do I display database information (using callbacks, I'm guessing) in a textbox that pops up from a jquery hover?

Thanks,
Michael

Answer 1

Assuming you have server-side application that can return the proper JSON, the implementation would be like this:

$(".item").mouseenter(function(){
    var postUrl = $(this).href;
    // Get the JSON From server, and format the data into the box
    $.getJSON(postUrl, function (data) {
        showInfoBox(data);
    });
});

showInfoBox = function(data) {
    var ibox = $("#divInfoBox");
    $(".name", ibox).html(data.name);
    $(".description", ibox).html(data.description);
    // More data injection here

    ibox.show();

};

The relevant HTML will be something like:

<div id="divInfoBox">
    <h3 class="name"></h3>
    <p class="description"></p>
</div>

<.......>

<!-- list of the item that need database data !-->
<ul id="itemList">
    <li><a href="/url/to/data?id=1">1</a></li>
    <li><a href="/url/to/data?id=2">2</a></li>
    <li><a href="/url/to/data?id=3">3</a></li>
</ul>

Answer 2

Hopefully this condensed description helps and should go along with the code xandy posted:

I would create a dynamic page that serves JSON. The page would take the key info to be able to pull that data back. I would then create a hover event which would pass info to the JSON about the product being hovered. When the data came back I would populate that info into a DIV or use a modal or tooltip plugin to display the info.

Answer 3

A fairly simple way to achieve this is via client-side templating, see this blog post for a detailed look at this. As a summary, what client-side templating basically means is:

1. You have some HTML fragment in your page that represents the hover display element
2. Then using jquery you make an AJAX call to the server to get the data you want to display.
3. On receipt of the data from the AJAX call you use jquery to clone the html fragment.
4. Finally, you inject your received data into the cloned HTML fragment and display.

Hope that helps you out.

Answer 4

You could create a hidden <div> for each item during page generation as well (if the data isn't huge), and pull that data into your popup box. This div could be hidden with jQuery - making people without javascript (namely google's crawler, and text readers) still get the "full description" data.

Then it just becomes a matter of positioning/showing your <div> when you hover. hovertip seems to be a good start.

Not having to request data through an AJAX call will make the page feel more 'responsive'

Answer 5

I really like the answer xandy gave and I can see making a lot of good use out of that example, however I don't know JQuery too well, could someone tell me how I could do the same thing using something other then a list item?

For example, instead of this

<ul id="itemList">
    <li><a href="/url/to/data?id=1">1</a></li>
    <li><a href="/url/to/data?id=2">2</a></li>
    <li><a href="/url/to/data?id=3">3</a></li>

How could I use a span class (or something of the like)? For example, could I do something like this? (it doesn't work but hopefully you get the idea).

<span id="MyLinkOne"><a href="/url/to/data?id=1">1</a></span>
<span id="MyLinkTwo"><a href="/url/to/data?id=2">2</a></span>

I tried

$("#MyLineOne").mouseenter(function(){......

But it didn't work, plus that isn't too scalable (if there is going to be 20 - 50 links per page).

Any ideas?

TIA!!!