jQuery tabs error when used with jTemplates

Question

I am using jTemplates to format data returned from a json query. I am trying to transform the div with the id "fundingDialogTabs" into jQuery tabs after the template is processed. It renders the tab buttons, but both fragment1 and fragment2 divs are showing at the same time. I get the error "jQuery UI Tabs: Mismatching fragment identifier" when clicking on the fragment2 tab. I tested the jQuery tabs code outside of the template and it works fine. Here is the template (saved in .tpl file).

{#template MAIN}
<div style="width:500px">
 <table border="0" cellpadding="0" cellspacing="0" id="fundingDialogTitle">
<tr>
    <td class="fundingDialogTitle">Funding Breakout</td>
    <td style="text-align:right"><img src="../../images/fscaClose.gif" onclick="CloseFundingDialog()" style="cursor:hand; width:25px; height:25px;"></td>
</tr>
 </table>
</div>
<div style="padding:10px 10px 10px 10px; width:500px">

<div id="fundingDialogTabs">
 <ul>
    <li><a href="#fragment1"><span>Source</span></a></li>
    <li><a href="#fragment2"><span>Line Item</span></a></li>
</ul>
<div id="fragment1">
    <table border="0" cellpadding="0" cellspacing="0" id="fundingDialog">
        <tr>
            <th>Funding Source</th>
            <th>Amount</th>
        </tr>
        {#foreach $T.d as fundingList}
            {#include ROW root=$T.fundingList}
        {#/for}
    </table>
</div>
<div id="fragment2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>



</div>
{#/template MAIN}

{#template ROW}
<tr>
  <td>{$T.SourceName}</td>
  <td>{$T.Amount}</td>
</tr>
{#/template ROW}

Here are the json and processTemplate methods:

function GetFundingDialog(id) {

    $.ajax({
        type: "POST",
        url: "../../WebService/Workplan.asmx/GetFundingList",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            ApplyTemplate(msg, id);
        },
        error: function(result) {
            ShowError(result.responseText);
        }
    });

  }

  function ApplyTemplate(msg, id)
  {
     var fundingDialog = $("div[id='divFundingList']");
     if (fundingDialog.length > 0)
     {
        fundingDialog.setTemplateURL('../../usercontrols/Workplan/FundingList.tpl');
        fundingDialog.processTemplate(msg);
        fundingDialog[0].style.display = "block";

        var src = $("img[id='openFundingList_"+id+"']");
        if (src.length > 0)
        {
            var srcPosition = findPos(src[0]);
            fundingDialog[0].style.top = parseInt(srcPosition[1] + 25);
        }
     }

     $("#fundingDialogTabs").tabs();

   }

Answer 1

I think you might just be missing the following CSS:

.ui-tabs .ui-tabs-hide {
    display: none;
}

I've had a similar problem past and this fixed it.