After load of tabs in DV

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

After load of tabs in DV

Post by jsetzer » 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
chrome_2018-08-07_14-10-36.png (201.73 KiB) Viewed 1603 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
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: After load of tabs in DV

Post by jsetzer » 2018-08-07 20:31

:idea: 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
chrome_2018-08-07_22-26-53.png (3.06 KiB) Viewed 1587 times
:?: There is still problem #2: getting the correct number of records.

Kind Regards,
Jan
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: After load of tabs in DV

Post by jsetzer » 2018-08-07 21:16

:idea: 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
2018-08-07_23-15-09.png (25.8 KiB) Viewed 1586 times

This may not be the best solution - but it works without touching overwritable files.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply