从 Ajax 加载 jQuery 选项卡

Question

我有一个使用下面的代码运行的加载图像。它显示动画 gif 并等待从 url 获取 html。获取后，它会隐藏加载 div 并将 html 加载到咬合 div 中。返回的 html 全部包含在 jQuery Tabs 中，但是当显示 html 时，选项卡不会呈现，只显示 li 元素。

是否可以通过 AJAX 获取包含 jQuery 选项卡的 html 并呈现这些选项卡？如果是这样我做错了什么？

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

Answer 1

我创建了这段代码，它可以使用微调器加载 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);
                }
            }
        }
    });
});

});