Índice

Plataforma

Produto:   TOTVS Fluig Plataforma

Versão: 1.5 Todas as versões

Ocorrência

código javascript Código JavaScript não funciona em nav-tabs nas abas secundariassecundárias. 

Causa

o O código javascript JavaScript é criado em tempo de carregamento da página, como . Como a div <div> com código está em uma aba secundaria secundária, ela não é visível neste momento. 

Solução

para Para resolver este caso nós temos dispomos de duas documentações (https://style.fluig.com/components.html#nav,
https://style.fluig.com/javascript.html#tabs)
Vamos colocar como exemplo o chart (https://style.fluig.com/chart.html) em uma aba secundaria.
As Tabs aceitam eventos então para mostrar algo no Style Guide: Navs e Togglable tabs.

Como exemplo, vamos colocar um componente Chart em uma aba secundária.

As tabs aceitam eventos, portanto para mostrar um componente em uma aba não selecionada, é necessário adicionar: em uma aba não visível é necessário adicionar

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

o O comando $('a[data-toggle="tab"]') pode ser alterado para $('a[href="#id_tab"]') aonde você vai utilizar o id da sua tab.então para

Para aplicar o gráfico em uma aba diferente da primeira, ficaria assim. :SCRIPT

$(document).ready(function(){ 

$('a[href="#teste"]').on('shown.bs.tab', function (e){ 

var chart = FLUIGC.chart('#MY_SELECTOR'); 

var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [ 
{ 
label: "My First dataset", 
fillColor: "rgba(220,220,220,0.5)", 
strokeColor: "rgba(220,220,220,0.8)", 
highlightFill: "rgba(220,220,220,0.75)", 
highlightStroke: "rgba(220,220,220,1)", 
data: [65, 59, 80, 81, 56, 55, 40] 
}, 
{ 
label: "My Second dataset", 
fillColor: "rgba(151,187,205,0.5)", 
strokeColor: "rgba(151,187,205,0.8)", 
highlightFill: "rgba(151,187,205,0.75)", 
highlightStroke: "rgba(151,187,205,1)", 
data: [28, 48, 40, 19, 86, 27, 90] 
} 
] 
}; 

// call the bar function 
var barChart = chart.bar(data, null); 
}); 
}); 

...

...

<div id="MY_SELECTOR"></div>

...