JqWidget tabs - dynamically add tab with ajax content

Question

I want create a dynamic on click append data to tab but I get in the tab undefined. Could you tell me whats wrong? Not quite sure what is the case,

My 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>

My html

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

            </ul>

        </div>
    </div>

Answer 1

So first check the right syntax for tab control:

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

For better understanding check: http://jsfiddle.net/charlesrv/h4573ykv/1/

EDIT: For the new condition, use a custom attribute so checking would be easier:

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