CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-tabs
django
django

Reputation: 2909

jquery ui tabs change content after .tabs() initialization

OBJECTIVE: How can I change content of ui tabs after it has been initialized.

See code below.Possible something after $tabs.find(content-1) etc

  1. Actually My tabs have content based on json requests which then will be parsed and displayed as per requriement (graphs,tables etc).
  2. I can not use
  3. tab1 method described in ui docs for ajax content because I need all tabs to have data separately and load simultaneously. Ajax method keeps replacing one tab data with other tab data which is not my requirement.

So ideally,

  1. tabs should init with "loading .." message.
  2. Then Afetr i have detected its init event , i should make say 3 different ajaxcalls , process data and whichever is completed, "loading .." message should be replace with its content.

My JSFIDDLE

HTML:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab1</a>
        </li>
        <li><a href="#tabs-2">tab2</a>
        </li>
        <li><a href="#tabs-3">tab3</a>
        </li>
    </ul>
    <div id="tabs-1">
        <p>loading...</p>
    </div>
    <div id="tabs-2">
        <p>loading...</p>
    </div>
    <div id="tabs-3">
        <p>loading...</p>
    </div>
</div>

JS

$tabs = $('#tabs').tabs({
    cache: false,
});
//
$tabs.do something here
$tab. detect evet if tabs have initialized ..
then send ajax requests and append to tabs content area ..

Upvotes: 2

Views: 4443

Answers (1)

SarathSprakash
SarathSprakash

Reputation: 4624

Working DEMO

Try this

I guess this is what you need

$(document).ready(function () {

    $tabs = $('#tabs').tabs({
        cache: false,
    });
    if ($('#tabs').hasClass('ui-tabs')) { // check if tabs initilized
        $('.tab').each(function () {
            var tab = $(this);
            $.ajax({
                url: '/echo/html/',
                success: function (data) {
                    tab.html("success"); // for demo
                }

            });

        });
    }
});

Upvotes: 1

Related Questions