與j模板一起使用時出現jQuery選項卡錯誤

Question

我正在使用j模板格式化從json查詢返回的數據。我正在處理模板後，試圖將id爲「fundingDialogTabs」的div轉換爲jQuery選項卡。它呈現標籤按鈕，但同時顯示fragment1和fragment2 div。點擊fragment2選項卡時，出現「jQuery UI Tabs：Mismatching fragment identifier」錯誤。我測試了模板之外的jQuery選項卡代碼，它工作正常。這是模板（保存在.tpl文件中）。

{#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} 

這裏是JSON和processTemplate方法：

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

我想你可能只是缺少以下CSS：

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

我也曾有過類似的問題，過去的這修復。