Ajax에서 jQuery 탭로드

Question

아래 코드를 사용하여 작동하는로드 이미지가 있습니다. 그것은 살아 움직이는듯한 gif를 보여 주며 html이 URL에서 가져 오기를 기다립니다. 가져 오면로드 div가 숨겨지고 html이 bite 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를 회 전자와 함께로드 할 수 있습니다. html rel 속성에서 오는 "ajax_href"옵션을 설정하고 사용한다는 것에주의하십시오. 각 링크에서 직접 옵션을 설정할 수도 있습니다. 또한 "width"와 "height"를 사용하여 각 탭 콘텐츠의 크기를 조정합니다. 탭에 대해 다른 콘텐츠 나 파일을 가지고있을 때 멋지게 보입니다.

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

});