Dynamic Ajax Tabs

[DavidSimmonsParticipant]

Will there ever be Dynamic Ajax tabs? I have many situations where I need the to have the Tab content refresh o selection. I would appreciate your consideration on this request.

[Peter StoevKeymaster]

Hi David,

You can update the tab’s content by handling the ‘tabclick’ event and update the content in the callback function. This is what is needed for dynamic update. You can also look at the suggested solution by Minko here: ajax-tab-example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavidSimmonsParticipant]

I would be more interested with an Ajax example. I am interested in loading html page snippets. Is that possible?

[MinkoBlocked]

Hello David,

Here you can see the upper example modified to work with html:

$(document).ready(function () {
    var theme = 'classic',
        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 + '.html',
                //On success - adding the new tab with the loaded content
                success: function (data) {
                    header = "Header " + (index + 1);
                    content = data;
                    //Checking the tab name
                    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)!');
                }
            });
        }
    });
});

And the html markup for the jqxTabs structure:

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

The example will load the content of html files with names 0.html, 1.html and 2.html.
Here is sample content of the html files:

0.html:

<strong>First tab's content</strong>

1.html:

<strong><i>Second tab's conent</i></strong>

2.html:

<a href="http://jqwidgets.com/" target="_blank">Third tabs</a>

Best regards,
Minko

jQWidgets Team
http://jqwidgets.com/

[Author]

Posts