Question

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>