Загрузить вкладки jQuery из Ajax - PullRequest
Новая
       7

Загрузить вкладки jQuery из Ajax

0 голосов
/ 01 декабря 2010

У меня есть изображение загрузки, которое работает с использованием кода ниже. Он показывает анимированный GIF и ждет получения HTML из URL. Как только он получен, он скрывает загрузочный div и загружает html в div bite. Возвращаемый HTML-код содержится во вкладках jQuery, однако при отображении HTML-кода вкладки не отображаются и отображаются только элементы li.

Можно ли получить этот HTML-файл, содержащий вкладки jQuery, через AJAX и отобразить эти вкладки? Если так, что я делаю не так? 

<div id="loader" style="text-align:center; display:none;">
<img src="img/ajax-loader.gif" alt="LOADING" />
</div>

<div id="bite"></div>

$(document).ready(function () {
  $('#loader').show();
  $.ajax({
    url:'http://www.domain.com/bitesized/main.php?uid=<?php echo $uid; ?>',
    complete: function(data){
        $('#loader').hide();
        $('#bite').html(data.responseText);
        // these divs ids are available after the load above and are meant to render the tabs
        $("#tabs").tabs();
        $("#fragment-a").tabs();
    }
  });
});

1 Ответ

0 голосов
/ 24 декабря 2010

Я создал этот код, который может загружать AJAX с помощью счетчика.Обратите внимание, что я установил и использую опцию "ajax_href", которая происходит из атрибута html relВы также можете установить опцию непосредственно из каждой ссылки.Я также использую «ширину» и «высоту», чтобы изменить размер каждого вкладки.выглядит красиво, когда на вкладках разный контент или файлы. 

$(document).ready(function() {

// check
$('.jquery_tabs_ajax').each(function() { 

    // tabs
    var $tabs = $(this).tabs({ 

        cache: false,
        ajaxOptions: { async: true, cache: false },
        show: function(event, ui) {

            // get
            var my_panel_id = '#ui-tab-' + (ui.index + 1);
            var get_panel_id = $(my_panel_id);
            var get_parent_link = get_panel_id.parents('ul:eq(0) li a[href="' + my_panel_id + '"]');
            var get_parent_rel = get_parent_link.attr('rel');

            // check options
            if(get_parent_rel) {

                // option object
                var $obj_option = {};

                // split
                $split_option_a = get_parent_rel.split(';');
                for(var so = 0; so < $split_option_a.length; so++) {
                    $split_option_b = $split_option_a[so].split('=');
                    $obj_option[$split_option_b[0]] = $split_option_b[1];
                }

                // load AJAX
                if($obj_option.ajax_href) {

                    // set spinner
                    get_panel_id.html('<div class="spinner_container"><div class="spinner"></div></div>')

                    // load AJAX
                    $.ajax({

                        type: "POST",
                        url: $obj_option.ajax_href,
                        async: true,
                        cache: false,
                        success: function(response_text) {

                            // set HTML
                            get_panel_id.html(response_text);
                        }
                    });
                }

                // check resize
                if($.colorbox && ($obj_option.width || $obj_option.height)) {

                    // resize
                    $.colorbox.resize($obj_option);
                }
            }
        }
    });
});

});

...