Ошибка вкладок jQuery при использовании с jTemplates - PullRequest
0 голосов
/ 04 марта 2010

Я использую jTemplates для форматирования данных, возвращаемых из запроса json. Я пытаюсь преобразовать div с идентификатором «fundingDialogTabs» во вкладки jQuery после обработки шаблона. Он отображает кнопки вкладок, но оба div1 фрагмента1 и фрагмента2 отображаются одновременно. Я получаю сообщение об ошибке «Вкладки пользовательского интерфейса jQuery: несоответствующий идентификатор фрагмента» при нажатии на вкладку фрагмента2 Я протестировал код вкладок 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();

   }

1 Ответ

0 голосов
/ 22 апреля 2010

Я думаю, что вам может не хватать следующего CSS:

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

У меня была похожая проблема в прошлом, и это исправило ее.

...