jqote template issue with jquery ui tabs(video inside)

I'm using jQote as the templating system for my page. I had a hard time trying to explain what is happening in text so I uploaded a video.

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

Basically some times it renders right and sometimes it doesn't like there is an error. Chrome and Firefox do not report and error and 开发者_开发知识库when I do an inspect with Chrome the output is the same if it doesn't render right or if it does render right.

This is my code.

    <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>

I've tried everything I can think of. I've moved the files all around, from the head, to the bottom of the page. Changed order. I'm not sure what is going on.

This is my json for anyone who needs to see it.

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

I didn't know if anyone has seen this before. I can't switch to jquery templating because of the ${ character. Play framework does not like that.

I have a feeling that it's something to do with the $.getJSON call because if I use the setTimeout function and put it to like 1 or 10 it never completes correctly.

Thanks for any help.

EDIT:

<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>
<% } %>
]]>

This is the full code.

This is my datatable function

$(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]);                
                }   
            }           
        }); 
    });

}); 

I've tried putting this in the complete() function for $.getJSON but the fact is it requires a the window.load because it is quite a bit of data. I maybe missing something though.

My datatable will fire some times. Some times it just hangs and nothing happens.

With the code you've shown, where exactly are you initiating the tabs? Because from the looks of things, you aren't checking whether the json request has been completed or not before initiating the tabs, and if that's the case, the results you are getting aren't a surprise (assuming you are currently locally, when you'd move it to the interwebs you probably wouldn't have it working a single time).

Try this, edit the following:

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

To include the part where you initiate the tabs, like this:

   $.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
    });