Boa noite. Estou criando uma aplicação e no caso estou enfrentando problemas, no caso criei um Modal que abre por meio de um botão e dentro deste modal tenho duas tabs, para visualizar as informações e alterar o registro. Porém estas abas não estão funcionando.
Segue abaixo os códigos. No caso estou usando além do Jquery, o bootstrap. Primeiro a parte em que uso o botão para chamar o modal.
echo " <tr>
<!--Botões-->
<td style='white-space: nowrap; width:20px;' class='nosort'>
<button type='button' title='Informação' class='' data-toggle='modal' data-target='#myModal$id' id='btninfo'><img src='../IMG/info.png' width='20px' height='20px'/></button>
</td>
</tr> ";
Depois que aciona o botão, abre o modal. Até ae tudo bem. Está parte está funcionando direito, o problema esa na hora de abrir as abas visto que somente a primeira está abrindo. A segunda só abre no primeiro registro da tabela não abrindo nas demais, Segue abaixo a outra parte do código.
<!--Início do Modal em TAB-->
<ddiv id="myModal<?=$id;?>" class="modal fade bs-example-modal-lg" role="dialog">
<!--Conteúdo do modal-->
<div class="modal-content" style="width:1000px; background-color: #d5e6f2;">
<!--Cabeçalho do modal-->
<div class="modal-header" style="background-color: #d5e6f2; padding: 2px 16px; color: #FFFFFF; height: 50px;">
<p style="font-size: 18px; text-align:center; background-color: #b3cce5; color: #0028a5;">Ocorrência de nº <b><?=$id;?></b></p>
</div>
<!--Fim do Cabeçalho-->
<!--Corpo do modal-->
<div class="modal-body" style="background-color: #d5e6f2;">
<!-- Aqui estão as TABS-->
<div class="tabbable">
<ul class="nav nav-tabs" > <!-- id="tabContent" data-tabs="tabs" -->
<li class="active" style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 15px; color: #2e6ebd; background-color: #eaf4fd;" >
<a href="#registro" style="color:#e1703a;"><b>Registro de Usuarios</b></a> <!--class="registro"data-toggle="tab"-->
</li>
<li style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 16px; color: #2e6ebd; background-color: #eaf4fd;" >
<a href="#altOco" style="color:#e1703a;"><b>Alterar Ocorrências</b></a> <!--class="altOco" data-toggle="tab"-->
</li>
</ul>
<div class="tab-content" ><!--id="tabs"-->
<!--Esta Tab abre em todos os registros da Tabela-->
<div class="tab-pane fade in active" id="registro">
<div id="iniciaisInfo">
<p style="font-size: 15px; background-color: #e1edf6;"><b>Dados da Ocorrência:</b></p>
<ul class="lista-exibe">
<li>Designação: <?=$designacao;?></li>
</ul>
</div>
</div>
<!--Esta só abre no primeiro registro e trava nos demais-->
<div class="tab-pane fade" id="altOco">
<iframe src="AlterarOcorrencias.php?id=<?echo $id;?>" style="width: 950px; height: 600px; "></iframe>
</div>
</div>
</div>
</div>
<!--Fim do Corpo do modal-->
Aqui no caso está o código query/JavaScript que estou usando
<script type="text/javascript">
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
No caso como fazer para abrir a segunda Tab do segundo registro em diante. O que precisa ser arrumado nesta chamada Jquery. Testei várias chamadas Jquery e o uso do Bootstrap e nenhuma funciona.
Grato desde já.
Você está gerando um modal para cada linha da tabela?
Se estiver gerando dinamicamente tenta o seletor assim:
<script type="text/javascript">
$(document).ready(function(){
$(document, ".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
da um console.log($(this)); antes do tab(‘show’) e confere se ele tá pegando o seletor na tab clicada
Coloquei o console.log ele está dando a mensagem TypeError: $(…).tab is not a function
Estranho o script ta depois da referencia do bootstrap?
Arrumei este erro. Era um problema com a Jquery 3.1.1 estou utilizando a Jquery 1.11.1 agora é não está gerando erro, porém no console só aparece "Object { 0: HTML Document. … " e mesmo assim as abas não abrem a partir do segundo registro da tabela
Tira o document e vê qual elemento ele seleciona, se não selecionar a tab clicada testa:
<script type="text/javascript">
$(document).ready(function(){
$(".nav-tabs a").click(function(e){
$(e.target).tab('show');
});
});
</script>
Tô inspecionando o elemento, ao clicar na aba somente o elemento li é transformado para active. O elemento div abaixo fica travado com o active no primeiro elemento não mudando para o segundo.
Faz assim esquece o script e tenta só trocar suas li do tab-navs para:
<li class="active" style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 15px; color: #2e6ebd; background-color: #eaf4fd;" data-toggle="tab" >
<a href="#registro" style="color:#e1703a;"><b>Registro de Usuarios</b></a> <!--class="registro"data-toggle="tab"-->
</li>
<li style="font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 16px; color: #2e6ebd; background-color: #eaf4fd;" data-toggle="tab" >
<a href="#altOco" style="color:#e1703a;"><b>Alterar Ocorrências</b></a> <!--class="altOco" data-toggle="tab"-->
</li>
Troquei, mas continua sem trocar a Div.
A tag li altera o active, mas a div permanece travada com o active na primeira div
Não sei oque pode ser, testei as tabs aqui no modal e funcionou: https://codepen.io/anon/pen/KyWyow?editors=1100
Bom, no caso o problema é que a partir do segundo registro, a segunda Aba não funciona, No caso, tenho antes do botão que abre o modal, uma tabela HTML que é preenchida com dados vindo de um banco. Abaixo o bloco completo que faz a chamada, exinbindo resultado na tabela e
<!--Terceiro bloco de PHP, executa a consulta-->
<?
//echo $sql_dados;
$rsql_ver = $sql->execute($sql_dados); //Executa a Query
while (!$rsql_ver->EOF){ //Tratamento dos registros retornados na Query
$id = $rsql_ver->Fields['id']->Value;
$data = $rsql_ver->Fields['data']->Value;
$data_abertura = $rsql_ver->Fields['data_abertura']->Value;
$designacao = $rsql_ver->Fields['designacao']->Value;
$abordagem = $rsql_ver->Fields['abordagem']->Value;
$ponta_a = $rsql_ver->Fields['ponta_a']->Value;
$localidade_a = $rsql_ver->Fields['localidade_a']->Value;
$ponta_b = $rsql_ver->Fields['ponta_b']->Value;
$localidade_b = $rsql_ver->Fields['localidade_b']->Value;
$operadora = $rsql_ver->Fields['operadora']->Value;
$contrato = $rsql_ver->Fields['contrato']->Value;
$velocidade = $rsql_ver->Fields['velocidade']->Value;
$degrau = $rsql_ver->Fields['degrau']->Value;
$incidente_caixa = $rsql_ver->Fields['incidente_caixa']->Value;
$wo_caixa = $rsql_ver->Fields['wo_caixa']->Value;
$fer_abert = $rsql_ver->Fields['fer_abert']->Value;
$chamado_operadora = $rsql_ver->Fields['chamado_operadora']->Value;
$ambiente = $rsql_ver->Fields['ambiente']->Value;
$solucao_problem = $rsql_ver->Fields['solucao_problem']->Value;
$req_sisgt = $rsql_ver->Fields['req_sisgt']->Value;
$data_norm = $rsql_ver->Fields['data_norm']->Value;
$status = $rsql_ver->Fields['status']->Value;
$descricao = $rsql_ver->Fields['descricao']->Value;
$historico = $rsql_ver->Fields['historico']->Value;
$valor = $rsql_ver->Fields['valor']->Value;
$rota_dur_inc = $rsql_ver->Fields['rota_dur_inc']->Value;
$usuario_cad = $rsql_ver->Fields['usuario_cad']->value;
$usuario_alt = $rsql_ver->Fields['usuario_alt']->Value;
$usuario_end = $rsql_ver->Fields['usuario_end']->Value;
//echo $historico;
$saidaHistorico = explode('_____',$historico);
//echo $saidaHistorico."<BR>";
echo "
<tr>
<td>$designacao</td>
<td>$operadora</td>
<td>$velocidade</td>
<td>$ponta_a</td>
<td>$ponta_b</td>
<td>$incidente_caixa</td>
<td>$data</td>
<td>$data_norm</td>
<!--Botões-->
<td style='white-space: nowrap; width:20px;' class='nosort'>
<button type='button' title='Informação' class='' data-toggle='modal' data-target='#myModal$id' id='btninfo'><img src='../IMG/info.png' width='20px' height='20px'/></button>
</td>
</tr>
";
?>
Também caso , seja necessário essas são os arquivos .js e .css que estou utilizando.
<!--Links CSS-->
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css" /> <!--BootStrap-->
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.min.css"/> <!--BootStrap-->
<link rel="StyleSheet" type="text/css" href="../CSS/Paginas.css"><!--CSS desenvolvido pela equipe de governança-->
<!--Links JavaScript-->
<script type="text/javascript" charset="utf-8" src="../JS/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../JS/bootstrap.min.js"></script>
Existe alguma possiblidade de isto não estar dando certo pela versão do Jquery que esotu utilizando?
Creio que não deve ser erro relacionado ao PHP, continuo achando que deve ser algum erro de Jquery/JavaScript ainda.
Deu Certo, coloquei além do Jquery a chamada PHP parra as Tabs. Ae em conjunto com esse Script passado funcionou. Muito Obrigado
1 curtida