JqWidget選項卡 - 動態添加ajax內容的選項卡

Question

我想創建一個動態的點擊將數據附加到選項卡，但我得到的選項卡未定義。你能告訴我什麼是錯的嗎？不太清楚是什麼的情況下，

我的JS

<script type="text/javascript"> 
     $(document).ready(function() { 
      // Create jqxTabs. 
      $('#jqxTabs').jqxTabs({ width: 580, height: 200,showCloseButtons: true }); 
      var length = $('#jqxTabs').jqxTabs('length') + 1; 
      var loadPage = function (url) { 
       $.get(url, function (data) { 
        data; 
        // console.log($('#content' + length).text(data)); 
        // console.log(data); 
       }); 
      } 
      $('div.s span').click(function() { 
       var getvalue = $(this).attr('rel'); 

     $('#jqxTabs').jqxTabs('addFirst', 'Sample title',loadPage(getvalue).text()); 
       $('#jqxTabs').jqxTabs('ensureVisible', -1); 


}); 


      // $('#jqxTabs').on('selected', function (event) { 
       // var pageIndex = event.args.item + 1; 
       // loadPage('pages/ajax' + pageIndex + '.htm', pageIndex); 
      // }); 
     }); 
    </script> 

我的HTML

Answer 1

所以首先檢查標籤控件正確的語法：

HTML：

.... 
<div id='jqxTabs'> 
    <ul> 
    <li></li> 
    </ul> 
    <div></div> 
</div> 

Javasc RIPT：

// Create jqxTabs. 
$('#jqxTabs').jqxTabs({ width: 580, height: 200, showCloseButtons: true }); 
$('#jqxTabs').jqxTabs("removeFirst"); //here removes the empty tab 

//here the function must return the content, and the ajax must be async false for this purpose 
var loadPage = function (url) { 
    var result = null; 
    $.ajax({ 
     url: url, 
     type: 'get', 
     dataType: 'html', 
     async: false, 
     success: function(data) { 
      result = data; 
     } 
    }); 
    return result; 
} 

$('div.s span').click(function() { 
    var getvalue = $(this).attr('rel'); 

    $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue)); 
    $('#jqxTabs').jqxTabs('ensureVisible', -1); 
}); 

爲了更好地理解檢查：http://jsfiddle.net/charlesrv/h4573ykv/1/

編輯：對於新的條件下，使用自定義屬性，以便檢查會更容易：

$('div.s span').click(function() { 
    var getvalue = $(this).attr('rel'); 
    var opened = $(this).attr('opened'); 

    if (!opened) { 
     $(this).attr('opened', true); 
     $('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue)); 
     $('#jqxTabs').jqxTabs('ensureVisible', -1); 
    } 
});