AppGini Community Forums

Posted: **2018-08-07 12:29**

Hi there,

I'd like to put (Bootstrap-) badges inside the tab-captions of the details-tabs indicating the number of records:

: chrome_2018-08-07_14-10-36.png (201.73 KiB) Viewed 2265 times

The Bootstrap-code is quite simple:

Code: Select all

<ul class="nav nav-tabs">
    <!-- ... -->
    <li class="">
        <a href="#...-..." id="...-..." data-toggle="tab" aria-expanded="false" style="display: none;">
            Hinweise <span class="badge">3</span>
        </a>
    </li>
</ul>

There are two problems:

The javascript function has to be called after the tab has been loaded completely
Unfortunately $j(function(){...}); will be executed before the tabs have been loaded completely

I have to find out the number of records per details-tab
If there are more than 10 records counting then number or <tr> will not give the total number of records because of pagination

Can anybody help solving one or both problems?

Thanks in advance,
Kind Regards,
Jan

Posted: **2018-08-07 20:31**

Solution for problem #1:

I am using $j(document).ajaxStop(function () { /* ... */ }) to execute my code after every ajax call has finished. Now I can access the details tabs. Right now I am able to place badges with (dummy) value 999 into the tab captions.

Code: Select all

$j(document).ajaxStop(function () {

    var nav = $j('#children-tabs').find('ul.nav-tabs');
    nav.find('li').each(function () {
        var li = $j(this);
        var a = li.children('a').first();
        var count = 999; // todo: get the number of records
        if (count > 0)
            $j('<span />').css('margin-left', '8px').addClass('badge').append(count).appendTo(a);
    });
});

: chrome_2018-08-07_22-26-53.png (3.06 KiB) Viewed 2249 times

There is still problem #2: getting the correct number of records.

Kind Regards,
Jan

Posted: **2018-08-07 21:16**

Solution for problem #2: Well...

...I'm not satisfied with this workaround... but it works for the moment:

Code: Select all

$j(document).ajaxStop(function () {

    var nav = $j('#children-tabs').find('ul.nav-tabs');
    nav.find('li').each(function () {
        var a = $j(this).children('a').first();
        a.find('span.badge').remove();
        var panel_id = a.attr('href');
        var panel = $j(panel_id);
        var text = panel.find('.table-responsive > table > tfoot').text().trim();
        count = text.split(' ').pop();

        if (count > 0)
            $j('<span />').css('margin-left', '8px').addClass('badge').append(count).appendTo(a);
    });
});

The last row of the tab's table contains the number of records. I can fetch that last number and place it inside the tab caption as badge.

Here is what it looks like right now:

: 2018-08-07_23-15-09.png (25.8 KiB) Viewed 2248 times

This may not be the best solution - but it works without touching overwritable files.

AppGini Community Forums

After load of tabs in DV

After load of tabs in DV

Re: After load of tabs in DV

Re: After load of tabs in DV