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

<div class="s">
<span rel="gen.php">Load</span>
</div>
 <div id='jqxWidget'>
        <div id='jqxTabs'>
            <ul>

            </ul>

        </div>
    </div>

Answer 1

所以首先检查选项卡控件的正确语法：

HTML:

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

Javascript:

// 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);
    }
});

JqWidget 选项卡 - 动态添加包含 ajax 内容的选项卡

JqWidget tabs - dynamically add tab with ajax content

jqwidget