Erreur des onglets jQuery lors de l'utilisation de jTemplates

Question

J'utilise jTemplates pour mettre en forme les données renvoyées à partir d'une requête json. J'essaie de transformer la div avec l'identifiant "fundingDialogTabs" en onglets jQuery après le traitement du template. Il restitue les boutons de tabulation, mais les div fragment1 et fragment2 sont affichés en même temps. Je reçois l'erreur "jQuery UI Tabs: Mismatching fragment identifier" en cliquant sur l'onglet fragment2. J'ai testé le code des onglets jQuery en dehors du modèle et cela fonctionne très bien. Voici le modèle (enregistré dans le fichier .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} 

Voici les JSON et les méthodes 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

Je pense que vous pourriez manquer le CSS suivant:

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

J'ai eu un passé de problème similaire et ce l'a réparé.