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

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.

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

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?

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

Thanks,
Michael

4 个解决方案

#1

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

假设您有可以返回正确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();

};

The relevant HTML will be something like:

#2

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.

您可以在页面生成期间为每个项目创建隐藏的

(如果数据不是很大),并将该数据拉入弹出框。这个div可以用jQuery隐藏 - 让没有javascript的人(即google的抓取工具和文本阅读器)仍然可以获得“完整描述”数据。

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

然后,当你悬停时,它就变成了定位/显示你的

的问题。 hovertip似乎是一个良好的开端。

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

不必通过AJAX调用请求数据将使页面感觉更“响应”

#3

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

希望这个简洁的描述有助于并且应该与xandy发布的代码一起使用:

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.

我会创建一个提供JSON的动态页面。该页面将获取关键信息以便能够提取该数据。然后我会创建一个悬停事件,它将信息传递给JSON关于正在悬停的产品。当数据回来时,我会将该信息填充到DIV中或使用模态或工具提示插件来显示信息。

#4

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:

实现此目的的一种相当简单的方法是通过客户端模板,请参阅此博客文章以详细了解此信息。总结一下,客户端模板的基本含义是:

You have some HTML fragment in your page that represents the hover display element

您的页面中有一些代表悬停显示元素的HTML片段

Then using jquery you make an AJAX call to the server to get the data you want to display.

然后使用jquery对服务器进行AJAX调用以获取要显示的数据。

On receipt of the data from the AJAX call you use jquery to clone the html fragment.

收到来自AJAX调用的数据后,使用jquery克隆html片段。

Finally, you inject your received data into the cloned HTML fragment and display.

最后,将接收到的数据注入克隆的HTML片段并显示。

Hope that helps you out.

希望能帮到你。

#1