0

我正在使用 jTemplates 格式化从 json 查询返回的数据。在处理模板后，我正在尝试将 id 为“fundingDialogTabs”的 div 转换为 jQuery 选项卡。它呈现选项卡按钮，但同时显示 fragment1 和 fragment2 div。单击 fragment2 选项卡时，我收到错误“jQuery UI 选项卡：片段标识符不匹配”。我在模板之外测试了 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();

   }
4

1 回答 1

0

我认为您可能只是缺少以下 CSS：

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

我过去也遇到过类似的问题，这解决了它。

于 2010-04-22T00:59:34.180 回答