Discussoes de Programacao e Tecnologia

[RESOLVIDO]Tab dentro de Modal

11 respostas
jquerycssphp
F
ferhelloween

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á.

Alura Desenvolvimento Front-End React Do primeiro componente à liderança técnica! HTML/CSS/JavaScript fundamental, React com hooks e...

11 Respostas

R
Renner_Oliveira

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

F
ferhelloween

Coloquei o console.log ele está dando a mensagem TypeError: $(…).tab is not a function

R
Renner_Oliveira

Estranho o script ta depois da referencia do bootstrap?

F
ferhelloween

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

R
Renner_Oliveira

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>
F
ferhelloween

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.

R
Renner_Oliveira

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>
F
ferhelloween

Troquei, mas continua sem trocar a Div.

A tag li altera o active, mas a div permanece travada com o active na primeira div

R
Renner_Oliveira

Não sei oque pode ser, testei as tabs aqui no modal e funcionou: https://codepen.io/anon/pen/KyWyow?editors=1100

F
ferhelloween

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.

F
ferhelloween 1 like

Deu Certo, coloquei além do Jquery a chamada PHP parra as Tabs. Ae em conjunto com esse Script passado funcionou. Muito Obrigado

Criado 10 de novembro de 2017
Ultima resposta 22 de nov. de 2017
Respostas 11
Participantes 2

Topicos relacionados

Jquery não funciona 1 respostas Como criar notificações em jS? 2 respostas [Resolvido] JavaScript para de funcionar ao atualizar tabela 8 respostas Problema com Javascript recebendo a função em PHP 9 respostas Pessoal, já li vários artigos sobre cors, varias possíveis soluções, mas até agora não consegui resolver meu problema, me ajudem? 4 respostas
Alura POO: o que é programação orientada a objetos? Aprenda os conceitos básicos da programação orientada a objetos, como classes, objetos, herança, encapsulamento e polimorfismo, com exemplos.
Casa do Codigo HTML5 e CSS3: Domine a web do futuro Por Lucas Mazza — Casa do Codigo