putting the result of an ajax function in a fancybox 1.3.4

Question

This seems to be a an obvious capability, but I am completely unable to figure out how to do it. I have a series of links like so

<a onclick="func('AS');" href="#">Asia</a>
<a onclick="func('AU');" href="#">Australia</a>
<a onclick="func('NA');" href="#">North America</a>

The func function does a bunch of data prep and then sends out an ajax request. The results of the ajax request are converted into sparklines. It kinda looks like so

"func": function(continent) {
    $.ajax({
        url     : "path/to/data.json",
        type    : "GET",
        data    : {"continent": continent},
        dataType: "jsonp",
        error   : function() { alert("Error loading html document"); },
        success : function(result) {       
            var html = "<table>" + 
                        "<tr><td colspan='2'><div id='a'></div></td></tr>" + 
                        "<tr><td colspan='2'><div id='b'></div></td></tr>" + 
                        "</table>";

            $("#a").sparkline(result.a);
            $("#b").sparkline(result.b);
        }
    });

}

All this works very well, except, I want to show the html table inside a fancybox popup, and I can't figure out how to wire this up. I am guessing I would have to reverse the operation something like so -- bind the fancybox trigger to the links with the continent codes, pass the continent code to the fancybox launcher, and fill the fancybox with the results of the ajax call. All that said, how do I actually do this?

Update: Actually, the following worked

"func": function(continent) {
    $.ajax({
        url     : "path/to/data.json",
        type    : "GET",
        data    : {"continent": continent},
        dataType: "jsonp",
        error   : function() { alert("Error loading html document"); },
        success : function(result) {       
            var html = "<table>" + 
                        "<tr><td colspan='2'><div id='a'></div></td></tr>" + 
                        "<tr><td colspan='2'><div id='b'></div></td></tr>" + 
                        "</table>";

            $.fancybox({
                content: html,
                autoDimensions: true
            });

            $("#a").sparkline(result.a);
            $("#b").sparkline(result.b);
        }
    });

}

Answer 1

Something along these lines?

success : function(result) {       
            var html = "<table>" + 
                        "<tr><td colspan='2'><div id='a'></div></td></tr>" + 
                        "<tr><td colspan='2'><div id='b'></div></td></tr>" + 
                        "</table>";

            $("#a").sparkline(result.a);
            $("#b").sparkline(result.b);

            // Pass table to fancybox
            $.fancybox(html);
        }