jQuery tabs error when used with jTemplates

Posted by tessa on Stack Overflow See other posts from Stack Overflow or by tessa
Published on 2010-03-04T16:33:44Z Indexed on 2010/04/22 1:03 UTC
Read the original article Hit count: 289

Filed under:
|

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

   }

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about jtemplate