從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選項卡

回答

相關問題