【问题标题】:How to display information returned by ajax call in a tooltip如何在工具提示中显示 ajax 调用返回的信息
【发布时间】:2011-06-10 00:46:33
【问题描述】:

我创建了一个 JSP 文件,它返回数据库所需的信息。我还编写了代码,该代码将对这个 jsp 文件进行 ajax 调用以检索信息。但是我没有得到任何好的或免费的工具提示库来知道如何将这些信息放入工具提示中。请在 javascript 中推荐好的和免费的工具提示库(我不擅长 jquery 我知道它的强大但我需要学习和更改我的整个代码)。

问题:我需要在将鼠标悬停在列表视图的不同选项上时显示此工具提示内容。 (listview 的每个选项都会有不同的信息)在每个选项上移动鼠标时,应该向 JSP 页面发送一个 ajax 调用并将预期的调用返回到工具提示中)我现在编写 javascript 代码来进行 ajax 调用并从 JSP 获取内容文件唯一的问题是使用哪些tootip 库以及如何将它用于listview 的每个选项。请建议。

【问题讨论】:

    标签: javascript ajax jsp tooltip


    【解决方案1】:

    qTIP 可以解决问题。拿到图书馆。为您需要的标签配置它。其余的可以这样:

    1. 获取 AJAX 响应
    2. 使用javascript修改title属性。像

    document.getElementById(id).setAttribute('title', 'Ajax response here');

    图书馆会为您完成剩下的工作。

    要规避 AJAX 调用的问题,您可以使用此检查:

    //on mouseover call for an AJAX function and check this
    if(!document.getElemenyById(id).getAttribute){
        //the title is not set, use Ajax to retrive it an set it
        tooltip.init(); //this is crucial for the tooltip to work
    }
    

    编辑:在库中搜索 var qTipTag = "a,label,input"; 并将其更改为 var qTipTag = "li,a,label,input";。这将为您想要的标签启动工具提示引擎。

    你可以在这里看到它http://jsfiddle.net/DarkThrone/gu6T2/5/

    【讨论】:

    • 非常感谢您的帮助。因此,一旦我进行了 ajax 调用,那么 document.getElementById(id).setAttribute('title', 'Ajax response here');其中 id 是选择的 id(即 listview),而不是 title 应该使用选项?另一件事我将在哪里使用工具提示功能来显示文本?再次感谢您的帮助。
    • 工具提示在window.onload上实例化;您必须在要显示工具提示的标签上设置标题属性。
    • 谢谢你能帮忙改正语法 document.getElementById(id2).setAttribute(b, 'Ajax response here'); 这段代码正确吗?由于我希望为每个选项进行 ajax 调用并显示工具提示中的内容。非常感谢您的帮助。
    • 这里是所有代码 jsfiddle.net/DarkThrone/gu6T2 。您需要 niceforms emblematiq.com/lab/niceforms qTip(如上所述)和对代码 jsfiddle.net/DarkThrone/gu6T2 的修改,这样所有代码都应该工作:) 如果您有任何疑问,您可以在 stackoverflow 上发布另一个问题或通过 mi profile 联系我。
    • 非常感谢...我在这里问过这个问题:stackoverflow.com/questions/4716517/… 我有点困惑,我应该在哪里保存 niceform 的内容。我需要包含在主网页中还是可以保存在后端或其他方式?我将能够对其他域进行 ajax 调用,但我无法引用该站点。该域不允许添加内容。那么包含库或文件的安全方式是什么。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-02-28
    • 1970-01-01
    相关资源
    最近更新 更多