1

我使用 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 模板。播放框架不喜欢那样。

我有一种感觉，这与 $.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 的 complete() 函数中，但事实是它需要 window.load，因为它是相当多的数据。我可能会错过一些东西。

我的数据表会触发几次。有时它只是挂起，没有任何反应。

4

1 回答 1

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
    });
于 2011-06-08T19:23:31.080 回答