jQuery qTip Plugin Issue with AJAX

Question

I'm having some problems applying the qTip plugin with an AJAX call to PHP. I've done getJSON calls in the past. I'm having problems with the JS, not the PHP side. Here's the basics. I have several hundred links (anchors) with rel attributes. Each rel attribute contains the URL for the AJAX call to the PHP code which will return HTML or JSON (whatever works).

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

Links to CodeIgniter code look like the following (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 is where my issues is.

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

I can get the rel URL and dump it out using console.log, but I can't seem to get any kind of AJAX success output (data). I'm certain I can produce the HTML or JSON thru the PHP code; it's been tested. Do I need some kind of .each() or callback function approach to this problem?

WORKING SOLUTION:

/*
 * 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();
    });
});

Answer 1

Loop over elements to intialize plugin so you can treat each one as an individual instance. Within the plugin this may not be accessible whereas within the each loop it is. So you create a variable with the data needed, and pass that variable into plugin

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

    })
})

You want to look at options/show to set click as event to open tip