jQueryUI и отображение json-содержимого вкладки

Question

Я отлично могу загрузить json возвращенные данные (которые появляются «как есть» на моей странице html), однако я, похоже, не могу заставить сырые данные json исчезнуть. Я использовал следующий код:

$("#tavole").tabs({ 
    cache : false, 
    event: "mouseover", 
    ajaxOptions : { 
     cache : false, 
     dataType : 'json' 
    }, 
    beforeLoad: function(event, ui) { 
     ui.jqXHR.fail(function() { 
      ui.panel.html("Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo."); 
     }); 
    }, 
    load: function (event, ui) { 
     renderList(JSON.parse($(ui.panel).text())); 
    } 
}); 

выше код работает отлично и renderList запускается на выполнение, однако сырье возвращение JSON не появится на вкладке панели, независимо от того, что. Как я могу заставить его исчезнуть, чтобы я отображал только обработанный объект jquery?

это мой HTML:

<div id="tavole"> 
    <ul> 
     <li><a href="#tavole-1"><span class="ui-icon ui-icon-locked"></span>alfa</a></li> 
     <li><a href="#tavole-2"><span class="ui-icon ui-icon-person"></span>beta</a></li> 
     <li><a href="/api/products"><span class="ui-icon ui-icon-cart"></span>gamma</a></li> 

так, другими словами я получаю возвращение /api/products отображается один раз в панели вкладки и второй раз через функцию renderList.

Как я могу увидеть только отображаемый дисплей? почему я также вижу, что исходный json возвращается с /api/products?

Answer 1

Как я могу увидеть только отображаемый дисплей? почему я также вижу сырой возврат json от/api/продуктов?

Это идея инициализированных вкладок ajax, виджет будет просто отображать содержимое, возвращаемое вызовом ajax.

Вы можете либо иметь сервер визуализации фактический фрагмент HTML, или renderList вернуть результат вместо того, чтобы взаимодействовать с самим DOM, который даст вам возможность:

load: function (event, ui) { 
    var $panel = $(ui.panel) 
    var myHtml = renderList(JSON.parse($panel.text())); 
    $panel.html(myHtml); 
} 

Ваш лучший выбор, хотя бы чтобы написать пользовательскую функцию конвертера для вашего вызова ajax. Прямо сейчас, вы используете конвертер «json» для вашего результата ajax, который по умолчанию равен JSON.parse. Посмотрите документацию jQuery.ajax(), раздел converters. Должна быть возможность подключить настраиваемую функцию конвертера к вашему ajax-вызову в обработчике событий табуляции beforeLoad (см. tabs -> event: beforeLoad), который будет: а) выполнять разбор JSON и b) называть функцию renderList. Это сделает событие load вашего tabs устаревшим.

Последняя версия, безусловно, самая сложная, но (хотя я и не сделал это сам), я также считаю, что это самый чистый подход.