0

jTemplates を使用して、json クエリから返されるデータをフォーマットしています。テンプレートが処理された後、ID「fundingDialogTabs」の div を jQuery タブに変換しようとしています。タブボタンをレンダリングしますが、fragment1 と fragment2 の両方の div が同時に表示されます。fragment2 タブをクリックすると、「jQuery UI タブ: フラグメント ID が一致しません」というエラーが表示されます。テンプレートの外側で 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 に答える