AjaxからjQueryのタブをロード

Question

私は以下のコードを使用して動作する読み込みイメージを持っています。それはアニメーションGIFを表示し、HTMLからHTMLを取得するのを待ちます。フェッチされると、読み込みdivを隠し、htmlをbite 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(); 
    } 
    }); 
}); 

Answer 1

AJAXをスピナーで読み込むことができるこのコードを作成しました。私が設定し、html rel属性から来るオプション "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); 
       } 
      } 
     } 
    }); 
}); 

}）;