Загрузка содержимого AJAX в кодировке JSON на вкладки пользовательского интерфейса jQuery - PullRequest
Новая
       30

Загрузка содержимого AJAX в кодировке JSON на вкладки пользовательского интерфейса jQuery

8 голосов
/ 07 мая 2010

Мы хотим, чтобы все наши вызовы AJAX в нашем веб-приложении получали контент в кодировке JSON.В большинстве мест это уже сделано (например, в модальных режимах) и работает нормально.

Однако при использовании вкладок jQueryUI (http://jqueryui.com/demos/tabs/) и их функциональности ajax может быть возвращен только открытый текст HTML (т.е. изURL-адреса, указанные в тегах a ниже). Как мне получить функцию табуляции, чтобы распознавать, что при щелчке каждой вкладки она будет получать данные в кодировке JSON с указанного URL-адреса и загружать в индекс .content этого JSON? 

$(function() {
    $('div#myTabs').tabs();     
});

<div id="mytabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top"><a href="/url/one">Tab one</a></li>
        <li class="ui-state-default ui-corner-top"><a href="/url/two">Tab two</a></li>
    </ul>
</div>

Ответы [ 3 ]

17 голосов
/ 07 мая 2010

Вы можете использовать опцию dataFilter вызова ajax, чтобы преобразовать ваш ответ json в HTML, который вы хотите вставить в панель вкладки.

Примерно так: 

$('#mytabs').tabs({
    ajaxOptions: {
        dataFilter: function(result){
            var data = $.parseJSON(result);
            return data.myhtml;
        }
    },
});

Если ваш JSON-ответ выглядел так: 

{"myhtml":"<h1>hello<\/h1>"}
4 голосов
/ 05 февраля 2013

Я недавно застрял с этой проблемой, так что на случай, если кто-то уже недавно искал помощи по этому вопросу, я подумал, что было бы полезно заново открыть это обсуждение. Я работаю с jQuery 1.8.2 и jQuery UI 1.9.2. Я нашел лучший способ сделать это с последней версией пользовательского интерфейса jQuery - вернуть false из обработчика событий beforeLoad и отправить запрос getJSON с URL-адресом, указанным на соответствующей вкладке.

HTML разметка: 

    <div id="tabs">

        <ul>
            <li><a href="/json/tab1.json">Tab 1</a></li>
            <li><a href="/json/tab2.json">Tab 2</a></li>
            <li><a href="/json/tab3.json">Tab 3</a></li>
        </ul>

    <div>

Код вызова вкладок: 

    $(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                var url = ui.ajaxSettings.url;
                $.getJSON(url, function (data) {
                    ui.panel.html(data.text);
                });
                return false;
            }
        });
    });

Когда обработчик beforeLoad возвращает значение false, обычная функция отображения HTML-кода, полученного с URL-адреса, определенного на вкладке, отключается. Однако у вас все еще есть доступ к объектам event и ui, переданным обработчику beforeLoad. Вы получаете URL-адрес из вкладки с этим синтаксисом ui.ajaxSettings.url, а затем отображаете данные, возвращаемые запросом getJSON, как показано в примере Content by Ajax : 

ui.panel.html(data.text);

В моем случае это data.text, потому что JSON, который я получаю, содержит два свойства header и text.

4 голосов
/ 14 ноября 2011

Мне пришлось добавить: 

this.dataTypes=['html']

, чтобы заставить это работать.

В контексте: 

      ,ajaxOptions: {
    dataFilter: function(result,type){
      var data = $.parseJSON(result);
       // Trick jquery to think that it's html
       this.dataTypes=['html']
       return '<p>'+data.credential.id+'</p>';
    }
    ,error: function( xhr, status, index, anchor ) {
      $( anchor.hash ).html( i18n.AJAXError + ' (' + status + ')' );
    }
  }
...