Проблема с шаблоном jqote с вкладками jquery ui (видео внутри) - PullRequest
Новая
       50

Проблема с шаблоном jqote с вкладками jquery ui (видео внутри)

1 голос
/ 08 июня 2011

Я использую 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 Framework не нравится.

У меня такое ощущение, что это связано с вызовом $ .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]);                
                }   
            }           
        }); 
    });

});

Я пытался поместить ее в функцию complete () для $ .getJSON, но на самом деле для нее требуется window.load, потому что это немногоданные.Я, возможно, что-то упустил, хотя.

Мои данные будут срабатывать несколько раз.Иногда просто зависает и ничего не происходит.

1 Ответ

1 голос
/ 08 июня 2011

С кодом, который вы показали, где именно вы инициируете вкладки? Поскольку, судя по всему, вы не проверяете, был ли выполнен запрос 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
    });
...