0

以下のコードを使用して機能する画像を読み込んでいます。アニメーションGIFが表示され、URLからhtmlがフェッチされるのを待ちます。フェッチされると、読み込み中のdivが非表示になり、HTMLがバイトdivに読み込まれます。返されるhtmlはすべてjQueryタブ内に含まれていますが、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();
    }
  });
});
4

1 に答える 1

0

スピナーでAJAXをロードできるこのコードを作成しました。htmlrel属性に由来するオプション「ajax_href」を設定して使用していることに注意してください。各リンクから直接オプションを設定することもできます。また、「幅」と「高さ」を使用して、各タブコンテンツのサイズを変更します。タブのコンテンツやファイルが異なる場合は、見栄えがします。

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

}）;

于 2010-12-24T07:38:22.537 に答える