JQuery Tab widget and deferred content loading

JQuery Tab widget and deferred content loading

How do you use the current stable tabs widget to load ajax content? I'm looking to insert an asp.net ASCX usercontrol. I'm retrieving the string via an WCF call. I won't be referencing a file with my anchor tag, but rather want the item selectable to load the content. I'm not sure what needs to be done to retrieve the correct index so that the content can get loaded into the associated DIV element.

HTML Page snippet


      <ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab Two</a></li>
</ul>

<div id="tabs-1">
<p>Some text</p>
</div>
<div id="tabs-2">
<p>Some more text.</p>
</div>


Initializing the tabs


            $('nav[id$="tabs"]').tabs({
select: function (event, ui) {
var thistab = ui.index;
$("#tabs-" + thistab).html(GetContent(thistab));
$(thistab).html(GetContent(thistab));
},
beforeLoad: function (event, ui) {
ui.panel.html("<div align='center'><img src='Images/progress_indicator.gif' /></div>");
}
}
).addClass("ui-tabs-vertical ui-helper-clearfix");
$('nav[id$="tabs"] li').removeClass("ui-corner-top").addClass("ui-corner-left");

$("td:contains('More')").css("text-align", "center");


My GetContent function


      var clicked = new Array();
function GetContent(thistab) {

var data = {};
for (var x in clicked) {
if (clicked[x] == thistab) return;
}
switch (thistab) {
case 0: { data = { controlname: "MainContent.ascx", view: "engineerResults", UserType: "Engineer" }; break; }
case 1: { data = { controlname: "Summary.ascx" }; break; }
}

$.ajax({
type: "POST",
url: "LoadControl.svc/GetHTML",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var result = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
for (var i = 0; i < result.length; i++) {
$('#tab-' + thistab).append("<p>Put something here");
}
clicked.push(thistab);
}
});
}

Thank you.