如何通过ajax刷新气泡内容而不是刷新整个气泡?

时间:2015-03-09 14:44:06

标签: javascript jquery qtip qtip2

我正在使用qtip2 Jquery插件在输入中提供关键字的建议,但我想做的不是每次更新内容时刷新整个工具提示泡沫,而只是刷新内容工具尖端没有关闭它。

如果没有工具提示,它会有效地显示工具提示并通过Ajax调用内容,但如果有现有的工具提示,它将只更新现有工具提示的内容。

http://jsfiddle.net/fDavN/11723/

好的,我更新了我的代码,它有点工作,但我收到一个错误:typeError:$(...)。updateContent不是一个函数。

有人知道为什么吗?

  $(document).ready(function() {
var title = 'KnowledgeBase Suggestions';

$('#name').on("keyup", function () {
    if($(this).data('qtip') ) {
        var getFormUrl = "http://qtip2.com/demos/data/owl";
        $.ajax({ url: getFormUrl,
            success: function (data) {

                $(this).updateContent($(".qtip-content").html(data));
            }
        });
    }
    else {
        $(this).qtip({
            content: {
                text: "Loading...",
                ajax:{
                    url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
                    type: 'GET', // POST or GET
                    data: {}, // Data to pass along with your request
                    success: function(data, status) {
                        // Process the data
                        // Set the content manually (required!)
                        this.set('content.text', data);
                    }
                },
                title: {
                    button: true,
                    text: title
                }
            },
            position: {
                my: 'top left',
                at: 'center right',
                adjust: {
                    mouse: false,
                    scroll: false,
                    y: 5,
                    x: 25
                }
            },
            show: {
                when: false, // Don't specify a show event
                ready: true, // Show the tooltip when ready
                delay: 1500,
                effect: function() {
                    $(this).fadeTo(800, 1);
                }
            },
            hide: false,
            style: {
                classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
                tip: {
                    offset: 0
                }
            }
        });

    }

});

});

1 个答案:

答案 0 :(得分:0)

在黑暗中刺伤,因为我不知道updateContent做了什么,但您可能对引用$(this)

的方式有疑问

尝试更改

$('#name').on("keyup", function () {
    var $this = $(this);
    if($this.data('qtip') ) {
        var getFormUrl = "http://qtip2.com/demos/data/owl";
        $.ajax({ url: getFormUrl,
            success: function (data) {

                $this.updateContent($(".qtip-content").html(data));
            }
        });
    }
    else {
        ....

原因是this在ajax回调中是不同的this