使用AJAX的jQuery qTip插件问题

时间:2013-02-06 03:59:57

标签: jquery ajax json qtip

我在使用带有AJAX调用PHP的qTip插件时遇到了一些问题。我过去做过getJSON调用。我遇到了JS的问题,而不是PHP方面。这是基础知识。我有几百个具有rel属性的链接(锚点)。每个rel属性都包含对PHP代码的AJAX调用的URL,该代码将返回HTML或JSON(无论什么工作)。

http://craigsworks.com/projects/qtip2/

CodeIgniter代码的链接如下所示(https):

<a rel="https://domain/cataloguers/ajax_detail/144969" class="title_dialog title_color" href="#">A Strange and Wonderful Prophet ... May 30th 1803. A.L. 5803... [A Manuscript...</a>

Javascript是我的问题所在。

$(document).ready(function()
{
    $('a.title_dialog[rel]').click().qtip({
        content: {
            text: 'Loading...',
            ajax: {
                url: $(this).attr('rel'),
                type: 'GET',
                data: {},
                dataType: 'json',
                success: function(data) {
                    // Set the content manually (required!)
                    console.log(data);
                    this.set('content.text', 'Successful!');
                }
            },
            title: {
                text: 'Catalogue Item Details:',
                button: false
            }
        }
    })
});

我可以使用console.log获取rel URL并将其转储出去,但我似乎无法获得任何类型的AJAX成功输出(数据)。我确信我可以通过PHP代码生成HTML或JSON;它已经过测试。我是否需要某种.each()或回调函数来解决这个问题?

工作解决方案:

/*
 * ToolTip - qTip v2
 * For Title Details
 */
$(document).ready(function() {
    $('a.title_dialog[rel]').each(function() {
        var ajaxUrl=$(this).attr('rel');
        $(this).qtip({
            content: {
                text: $(this).attr('rel'),
                ajax: {
                    url: ajaxUrl,
                    type: 'GET',
                    data: {},
                    dataType: 'json',
                    success: function(result) {
                        this.set('content.text', result.content);
                    }
                },
                title: {
                    text: 'Catalogue Item Details:',
                    button: true
                }
            },
            position: {
                at: 'bottom center',
                my: 'top center',
                viewport: $(window),
                effect: false
            },
            show: {
                event: 'click',
                solo: true
            },
            hide: 'unfocus',
            style: {
                classes: 'qtip-light qtip-shadow'
            }
        })
    })

    // Make sure it doesn't follow the link when we click it
    .click(function(event) {
        event.preventDefault();
    });
});

1 个答案:

答案 0 :(得分:3)

循环元素以初始化插件,以便您可以将每个元素视为单个实例。在插件中this可能无法访问,而在each循环内则可以访问。因此,您需要使用所需数据创建变量,并将该变量传递给插件

$('a.title_dialog[rel]').each(function(){
    var ajaxUrl=$(this).attr('rel');
    $(this).qtip({
         content: {
            text: 'Loading...',
            ajax: {
                url:ajaxUrl,
          ..........

    })
})

您想查看options/show将点击设为事件以打开提示