Bootstrap tab panel event

Question

Bootstrap tab panel event

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I have a tab bootstrap panel with 5 interchangeable tabs (in active, fade, fade, fade, fade)

Within each of these tabs is included a dxchart (devextreme) that is graphed with Jscript.

When my page finishes loading, the graph that is in the tab with the class css: (in active) appears appropriately. But if I browse the other tabs, the graphics are not created.

I have researched the case and I have discovered that the graphs in the tabs (fade) have to be created in the tabchanged event.

I'm not very good at Jscript, and I've researched every code detail. I have found and modified the following:

var isShown = false;

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//  e.target // newly activated tab
//    e.relatedTarget // previous active tab
DrawChart(); isShown = true;           
})


function DrawChart() {
if (isShown)
    return;

$("#chartUtilidad").dxChart({
    dataSource: chartDataBar,
    commonSeriesSettings: {
        bar: {
            cornerRadius: 10
        },
        argumentField: 'ano_a'
    },

    tooltip: {
        enabled: true,
        format: "fixedPoint",
        precision: 2,
    },

    series: [
        { valueField: 'ing1_f', name: 'Ingreso', type: 'bar', color: '#4F81BC' },
        { valueField: 'cost1_f', name: 'Costo', type: 'bar', color: '#9BBB58' },
        { valueField: 'gastos1', name: 'Gasto', type: 'bar', color: '#23BFAA' },
        { valueField: 'uti1', name: 'Utilidad', type: 'bar', color: '#8064A1' },
    ],
    argumentAxis: {
        //tickInterval: { years: 1 },
        argumentType: 'string'
    },
    legend: {
        horizontalAlignment: 'center',
        font: { color: 'Black', size: 20 },
    },


    title: {
        text: 'Comparativo C$'
    },
    animation: {
        easing: 'easeOutCubic',
        duration: 3000
    }

});

}

Normally the code to create the graphs is the following (it works well in the "in active"):

$(function () {



$("#chartVentas").dxChart({
    dataSource: chartData,

    commonSeriesSettings: {
        type: "line",
        hoverMode: "allArgumentPoints",
        selectionMode: "allArgumentPoints",
        label: {
            visible: false,
        },
    },
    tooltip: {
        enabled: true,
        format: "fixedPoint",
        precision: 2,
        //customizeText: function () {
        //    return this.valueText + ' C$';
        //}
    },
    series: [
    { argumentField: 'argumento1', valueField: 'vtas1', name: '2016', color: '#4f81bc' },
    { argumentField: 'argumento2', valueField: 'vtas2', name: '2015', color: '#bc8a4f' },
    ],
    argumentAxis: {
        tickInterval: 1,
    },
    legend: {
        horizontalAlignment: 'center',
        font: { color: 'Black', size: 20 },
    },

    title: 'Cajas vendidas C$',

    animation: {
        easing: 'easeOutCubic',
        duration: 3000
    }


});

});

I do not know how the code for the tabchanged event needs to be structured.

This is the HTML:

<div class="container">  
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#venta">Ventas</a></li>
<li><a data-toggle="tab" href="#costo">Costos</a></li>
<li><a data-toggle="tab" href="#comparativo">Comparativo</a></li>
<li><a data-toggle="tab" href="#caja">Cajas</a></li>
</ul>

<div class="tab-content">
<div id="venta" class="tab-pane fade in active">
    <div id="chartVentas"></div>
</div>
<div id="costo" class="tab-pane fade">

</div>
<div id="comparativo" class="tab-pane fade">

  <div id="chartUtilidad"></div>

 </div>
<div id="caja" class="tab-pane fade">

</div>
</div>
</div>

javascript html5 bootstrap

asked by N'oel C'alero 14.04.2016 в 01:47

source

2 answers

1

Let's see, here you need to know the backend you are using. I found this possible solution:

First (ASPX):

<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0"> Algo de contenido<ClientSideEvents Init="function (s,e) {  DrawChart(); }" /> </dx:ASPxPageControl>

Second (ASPX):

<dx:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0"><ClientSideEvents ActiveTabChanged="function (s,e) { DrawChart(); isShown = true;}" /></dx:ASPxPageControl>

Third (JavaScript):

var isShown = false;
function DrawChart() {
if (isShown)
    return;

$("#chartContainer"}).dxChart({
    // add chart options
   })
}

Reference link: link

Regarding what you say about tabchanged , I think you need to add an onclick event in each tab by calling the function: "function (s, e) {DrawChart (); isShown = true;}" .

As a recommendation: use D3.js or Google Charts for that kind of graphics, both libraries are OpenSource, free, with excellent documentation and good support community. Regarding DevExpress ... The more I know it, the farther I want to be from that framework, personally it has given me headaches especially when everyone wants to update ... Look at how many lines of code it generates and the compiler that you have in the C: \ erebro will exploit an Overflow (ok no!).

Well, I hope you have been useful, keep going with all the power!

answered by 14.04.2016 в 02:25

How can I read or print a block of lines or data from a file, between two lines or two keywords within the file in python? I can not close a pop-up

score 1 · Accepted Answer

Noel, if the problem is that the maps are not loaded in the non-active tabs, make them load when changing the focus by adding an event

Yes, correct is what I try to do but I'm not very good at JS, any example to follow?

What you need is to add events to the tabs. You have many ways to do it, via html directly using the attribute onclick , for example.

I, by custom, in these cases declare the listeners via js / jquery.

If you have javascript / HTML ( DOM ) pure look this example :

var ventas = document.getElementById('ventas');
ventas.addEventListener('click', function() {
    alert( "Carga grafico de ventas" );
}, false);

If you have JQuery look this other example :

$( "#costos" ).click(function() {
  alert( "Carga grafico de compras" );
});

If you have JQuery UI instead you can take the event tabs (link in English)

$("#tabs").tabs({
    select: function(event, ui) {
        alert("PRESSED TAB!");
    }
});