jqote模板問題與jquery ui選項卡（視頻內）

Question

我使用jQote作爲我的頁面的模板系統。我很難解釋文字中發生了什麼，所以我上傳了一段視頻。

http://www.youtube.com/watch?v=ugw4lIsF0HM

基本上有些時候它呈現的權利，有時它不喜歡有錯誤。 Chrome和Firefox不會報告錯誤，當我使用Chrome進行檢查時，如果輸出不正確，或輸出正確，則輸出相同。

這是我的代碼。

<script type="text/javascript"> 

    $.getJSON('/json/testData', function(data) { 
     $('#reportDiv').prepend($('#template').jqote(data));  
     // $('#reportDiv').html($.jqote('#template', data)); 
    });  

</script> 

<div id="pkgLineTabs" style="font-style: inherit; font-size: 13px" > 
    <div id="reportDiv"></div> 
</div> 

<script type="text/x-jqote-template" id="template"> 
    <![CDATA[ 
    <ul> 
     <% for (i = 0; i <= data.length; i++) { %> 
     <li><a href="#pkgLineTabs_<%= this.data[i].hash %>" class="toolTip" id="<%= this.data[i].hash %>"><%= this.data[i].shortname %></a></li> 
     <% } %> 
    </ul> 

    ]]> 
</script> 

我試過了我能想到的一切。我將文件從頭部移動到頁面底部。更改了訂單。我不確定發生了什麼事。

這是我的json，任何需要查看它的人。

{"data":[{"hash":"FB900DF","shortname":"Lines 3 & 4 - Baltimore"},{"hash":"FBAE86D","shortname":"Line 1 Cans"}]} 

我不知道有沒有人見過這個。由於$ {字符，我無法切換到jquery模板。 Play框架不喜歡那樣。

我有一種感覺，這與$ .getJSON調用有關，因爲如果我使用setTimeout函數並將其設置爲1或10，它永遠不會正確完成。

感謝您的任何幫助。

編輯：

<script type="text/x-jqote-template" id="template"> 
<![CDATA[ 
<ul> 
    <% for (i = 0; i <= data.length; i++) { %> 
    <li><a href="#pkgLineTabs_<%= this.data[i].hash %>" class="toolTip" id="<%= this.data[i].hash %>"><%= this.data[i].shortname %></a></li> 
    <% } %> 
</ul> 
<% for (i = 0; i <= data.length; i++) { %> 
<div id="pkgLineTabs_<%= this.data[i].hash %>"> 
    <table class="reportTable display" style="font-size:13px" title="<%= this.data[i].hash %>" > 
     <thead> 
      <tr> 
       <th style="">Row Color</th> <!--hidden --> 
       <th style="">Time Stamp</th> 
       <th style="">Ounces</th> 
       <th style="">Revolutions</th> 
       <th style="">Pallet Count</th> 
       <th style="">Roll Change</th> 
       <th style="">Breaks</th>     
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td colspan="5" class="dataTables_empty">Loading data from server...</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<% } %> 
]]> 

這是一個完整的代碼。

這是我的數據表功能

$(window).load(function() {   

    $('.reportTable').each(function() {  

     var pkgLineId = $(this).attr('title'); 

     var reportTable = $(this).dataTable({   

      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "bPaginate": true, 
      "bLengthChange": true, 
      "bFilter": false, 
      "bSort": false, 
      "bInfo": true, 
      "bAutoWidth": false,  
      "bProcessing": true, 
      "bServerSide": true, 
      "bProcessing": true, 
      "sDom": '<"H"lfrp>t<"F"lip>', 
      "iDisplayLength": 15, 
      "aLengthMenu": [[10, 15, 20, 50, 100, 200, 500], [10, 15, 20, 50, 100, 200, 500]], 
      "aoColumns": [ 
      { 
       "bVisible": false 
      },   
      null, 
      null, 
      null,     
      null, 
      null, 
      null  
      ], 
      "sAjaxSource": '/json/reportData/'+pkgLineId, 
      "fnDrawCallback": function() { 

       var nodes = reportTable.fnGetNodes(); 
       var lineStatus; 
       for (var i = 0; i < nodes.length; i++) {     
        lineStatus = reportTable.fnGetData(nodes[i]);    
        nodes[i].setAttribute("style", "background: " + lineStatus[0]);     
       } 
      }   
     }); 
    }); 

}); 

我試圖把這個在$ .getJSON完整的（）函數，但事實是它需要的window.load，因爲它是相當多的數據。我可能錯過了一些東西。

我的數據表會觸發一段時間。有時它只是掛起而沒有任何反應。

Answer 1

隨着你已經顯示的代碼，你究竟在哪裏啓動標籤？因爲從外觀上看，在啓動選項卡之前，您並沒有檢查json請求是否已完成，如果是這種情況，那麼您得到的結果並不令人意外（假設您目前是本地的，何時你可以將它移動到互聯網，你可能不會讓它工作一次）。

試試這個，編輯以下：

$.getJSON('/json/testData', function(data) { 
     $('#reportDiv').prepend($('#template').jqote(data));  
     // $('#reportDiv').html($.jqote('#template', data)); 
    }); 

要的地方包括：啓動選項卡，這樣的部分：

$.getJSON('/json/testData', function(data) { 
     $('#reportDiv').prepend($('#template').jqote(data));  
     // $('#reportDiv').html($.jqote('#template', data)); 
     $("#pkgLineTabs").tabs(); //and whatever settings you have for it currently, i.e. move it here 
    });