Blogs

In this post, we are going to illustrate how to dynamically add new tabs to the jqxTabs widget. Each new tab will be loaded with AJAX. – The first step is to add all JavaScript and CSS dependencies for the jqxTabs. Before closing the head tag put the following content:

<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
<script type="text/javascript" src="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>

– The second step is to add the HTML tags that define the jqxTabs’ structure:

<div id='jqxTabs' style="float: left;">
    <ul style="margin-left: 30px;" id="unorderedList">
        <li>Static 1</li>
        <li>Static 2</li>
        <li canselect='false' style='padding: 5px; font-style:italic; font-size: 14px; border: none; background: transparent;' hasclosebutton='false'>+</li>
    </ul>
    <div>
        Static 1
    </div>
    <div>
        Static 2
    </div>
    <div>
    </div>
</div>

– Before closing the head tag, add the javascript below:

<script type="text/javascript">
    $(document).ready(function () {
        var theme = 'classic';
        var addButton,
            addButtonWidth = 29,
            index = 0;
        // create jqxTabs.
        $('#jqxTabs').jqxTabs({ height: 200, width: 300, theme: theme, showCloseButtons: true });
        var index = 0;
        $('#jqxTabs').bind('tabclick', function (event) {
            var header,
                content;
            if (event.args.item === $('#unorderedList').find('li').length - 1) {
                //Loading the header and the content of the new tab with AJAX
                $.ajax({
                    type: 'get',
                    url: (index + 1) + '.json',
                    //On success - adding the new tab with the loaded content
                    success: function (data) {
                        data = $.parseJSON(data);
                        header = data['tab']['header'];
                        content = data['tab']['content'];
                        var length = $('#unorderedList').find('li').length;
                        $('#jqxTabs').jqxTabs('addAt', event.args.item, header, content);
                        index++;
                    },
                    //On error - alerting an error message
                    error: function () {
                        alert('Error (probably the file you want to load is missing)!');
                    }
                });
            }
        });
    });
</script>

In the above code, we select the ‘jqxTabs’ id and initialize the jqxTabs widget by calling the jqxTabs constructor. Then, we bind to the ‘tabclick’ event and provide a callback function. Let’s look closer into the callback which will be executed on tabclick. In the callback, we check whether the user clicked on the last tab and then load the header and content parts for the new tab with ajax. In the success function, we add the new tab to the jqxTabs with the loaded header and content. The header and content parts are loaded from different JSON files with the following structure:

{
	"tab": {
		"header": "Dynamic 1",
		"content": "Dynamic 1"
	}
}

The filename of the JSON file associated to the first new tab is 1.json, for the second tab 2.json and so on.