How do I output JSON columns in jQuery

Question

I'm using the qTip jQuery plugin to create dynamic tool tips. The tooltip sends an id to a cfc which runs a query and returns data in JSON format.

At the moment, the tooltip loads with the following:

{"COLUMNS:" ["BOOKNAME","BOOKDESCRIPTION"["MYBOOK","MYDESC"]]} 

Here's the jQuery

$('#catalog a[href]').each(function()
{
    var gi = parseInt($(this).attr("href").split("=")[1])
    $(this).qtip(
    {
        content: {
            url: 'cfcs/viewbooks.cfc?method=bookDetails',
            data: { bookID: gi  },
            method: 'get',
            title: {
                text: $(this).text(),
                button: 'Close'
            }
        },
        api :{
        onContentLoad : function(){
            }
        },
    });
});

As I mentioned, the data is returned successfully, but I am unsure how to output it and format it with HTML.

I tried adding content: '<p>' + data.BOOKNAME + '

' to api :{ onContentLoad : function(){ ..... to see if I could get it to output something, but I get a 'data is undefined error'

What is the correct way to try and output this data with HTML formatting?

Answer 1

This turned out to be another case where the ColdFusion debugger, when request debugging output is turned on, causes an ajax error. This is one big "gotcha" we need to remember when working with ColdFusion with debugging enabled. It breaks down ajax.

Answer 2

From the qTip forums, it appears that the author is adding an ajax call inside the api callback. Maybe that will solve your problem?

Here is his example:

$(this).qtip({
 content: 'Loading...',
 api: {
  onRender: function()
  {
   // Setup your AJAX request here
   $.ajax({
    url: DOC_ROOT + "admin/ajax/tooltip_process.php",
    type: 'GET';
    contentType: "application/json charset=utf-8",
    dataType: "json",
    success: function(json) {
     if(json[0].result == 'success') return json[0].tip;
     else alert('^$%#$#$');
    }
   });
  }
});

Answer 3

You have to specify the dataType as json in your request. It tells jquery to treat the response as json, so that you can use it as you are using currently. Also once you get the data as son you can create HTML to display.