Ошибка jQuery tabs при использовании с jTemplates

Question

Я использую jTemplates для форматирования данных, возвращаемых из json-запроса. Я пытаюсь преобразовать div с идентификатором «financeDialogTabs» в вкладки jQuery после обработки шаблона. Он отображает кнопки вкладок, но одновременно отображаются как фрагменты, так и фрагменты фрагмента2. При нажатии на вкладку фрагмента2 я получаю сообщение об ошибке «jQuery UI Tabs: Несоответствие идентификатора фрагмента». Я тестировал код вкладки 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; 
} 

У меня была аналогичная проблема, прошлое и это починил это.