从Ajax加载jQuery选项卡

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

是否有可能通过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(); 
    } 
    }); 
});

来源

2010-12-01 Martin

我无法发现该代码有任何问题。你能否验证`data.responseText`确实包含了你期望的HTML？ – 2010-12-01 13:03:09

我创建了此代码，它可以通过微调器加载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); 
       } 
      } 
     } 
    }); 
});

}）;

来源

2010-12-24 07:38:22

从Ajax加载jQuery选项卡

回答

相关问题