Ajax Tab Example

[DavidSimmonsParticipant]

Do you have any Ajax Tab example. Something were each tab’s contents is loaded via an Ajax call. If so can I add tab in the same manner?

[MinkoBlocked]

Hello David,

You can add new tabs which content is loaded via Ajax using the following code:

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

Here is the required HTML markup:

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

The example is using JSON files called 1.json, 2.json and 3.json, which content is loaded dynamically using AJAX. Here is sample content of 1.json:

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

Best regards,
Minko.

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts