使用JQuery在悬停上显示数据库信息

Question

我正在尝试使用类似于Red Box的 JQuery .我希望能够将鼠标悬停在表格中的条目上,然后有一个框弹出窗口,显示从数据库中提取的条目信息.

到目前为止我所拥有的是能够选择表格中的特定元素,并在我将鼠标悬停在这些元素上时发出警报:)

所以我的问题是:如何在从jquery悬停弹出的文本框中显示数据库信息(使用回调,我猜)？

谢谢,
迈克尔

Answer 1

假设您有可以返回正确JSON的服务器端应用程序,实现将如下所示:

$(".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();

};

相关的HTML将是这样的:

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