Boa tarde, estou lutando para melhorar uma página minha, onde gostaria de mostrar certas informações num modal, ao clicar num botão. O modal em si, está funcionando mas as informações não são mostradas dentro nele.
Eu fui acompanhando este tópico: https://stackoverflow.com/questions/37017276/how-to-open-modal-from-a-link-with-id
Essa é minha página (uma versão reduzida da original, para testes):
https://i.stack.imgur.com/ac3Fo.png
Ao clicar no botão de Detalhes, abre o Modal sem informações:
View post on imgur.com
E aqui é o que deveria mostrar dentro do Modal:
https://i.stack.imgur.com/sVnLw.png
Segue o código da minha página:
<?php
include_once("conexaoLocal.php");
$sql = "select armas.nome, armas.imagem, grade.imagem, substring(grade.imagem,14,2) switch, armas_ordem.ordenacao1 ";
$sql .= "from armas ";
$sql .= "inner join grade on armas.grade = grade.id ";
$sql .= "inner join armas_ordem on (armas.nome like armas_ordem.sub1 or armas.nome like armas_ordem.sub2 or armas.nome like armas_ordem.sub3 ";
$sql .= "or armas.nome like armas_ordem.sub4 or armas.nome like armas_ordem.sub5 or armas.nome like armas_ordem.sub6 or armas.nome like armas_ordem.sub7 ";
$sql .= "or armas.nome like armas_ordem.sub8) ";
$sql .= "where armas.tipo = 'AR' and armas_ordem.ordenacao2 = 1 and armas.nome = 'ACR' ";
$sql .= "order by armas_ordem.ordenacao1, armas.grade, armas.nome";
$consulta = mysqli_query($conexao,$sql);
$registros = mysqli_num_rows($consulta);
$print_inicio = "<section class='wrapper'><div class='inner'><div class='highlights'>";
$print_final = "</div></div></section>";
$count_acr_b3 = 0;
$print_acr_b3 = "";
$count_acr_t = 0;
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Teste</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="assets/css/main.css?v=4.0" />
<link rel="sortcut icon" href="https://i.servimg.com/u/f57/17/53/75/18/tutori13.png" type="image/x-icon" />
<!-- Modal -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-32925328-1"></script>
<script>
window.dataLayer = window.dataLayer || ();
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-32925328-1');
</script>
</head>
<body class="is-preload">
<div class="container">
<center>
<h2>Teste</h2>
<?php
while($exibirRegistros = mysqli_fetch_array($consulta)){
$nome = $exibirRegistros(0);
$imagem = $exibirRegistros(1);
$grade = $exibirRegistros(2);
$switch = $exibirRegistros(3);
$ordem = $exibirRegistros(4);
$sql2 = "select armas.dano, armas.peso, armas.cadencia, armas.precisao, armas.recuo, armas.distancia, armas.municao, armas.total, armas.kdr, armas.loaded, armas.pre_silenciador, ";
$sql2 .= "armas.pre_scope, armas.pre_pente, armas.pre_balas, armas.pre_mira_ferro, armas.kfi, ";
$sql2 .= "ifnull(modo_disparo1.nome,'') nome_disparo1, ifnull(modo_disparo1.imagem,'') disparo_imagem1, ifnull(modo_disparo2.nome,'') nome_disparo2, ";
$sql2 .= "ifnull(modo_disparo2.imagem,'') disparo_imagem2, modo_disparo3.nome nome_disparo3, modo_disparo3.imagem disparo_imagem3, ";
$sql2 .= "patentes.nome nome_patente, patentes.abrev abrev_patente, patentes.imagem patente_imagem, ";
$sql2 .= "popularidade.nome popularidade, mods_silenciador.imagem silenciador_imagem, mods_scope.imagem scope_imagem, mods_pente.imagem pente_imagem, ";
$sql2 .= "mods_balas.imagem balas_imagem, mods_mira_ferro.imagem mira_ferro_imagem, armas.descricao, ";
$sql2 .= "mods_outros_kdr.imagem imagem_kdr, mods_outros_loaded.imagem imagem_loaded, patentes.id id_restricao, armas.no_swing ";
$sql2 .= "from armas ";
$sql2 .= "inner join popularidade on popularidade.id = armas.popularidade ";
$sql2 .= "inner join grade on grade.id = armas.grade ";
$sql2 .= "inner join modo_disparo modo_disparo1 on modo_disparo1.abrev = armas.modo_disparo1 ";
$sql2 .= "left join modo_disparo modo_disparo2 on modo_disparo2.abrev = armas.modo_disparo2 ";
$sql2 .= "left join modo_disparo modo_disparo3 on modo_disparo3.abrev = armas.modo_disparo3 ";
$sql2 .= "inner join mods_silenciador on mods_silenciador.status = armas.pre_silenciador ";
$sql2 .= "inner join mods_scope on mods_scope.status = armas.pre_scope ";
$sql2 .= "inner join mods_pente on mods_pente.status = armas.pre_pente ";
$sql2 .= "inner join mods_balas on mods_balas.status = armas.pre_balas ";
$sql2 .= "inner join mods_mira_ferro on mods_mira_ferro.status = armas.pre_mira_ferro ";
$sql2 .= "left join patentes on patentes.id = armas.restricao ";
$sql2 .= "left join mods_outros mods_outros_kdr on mods_outros_kdr.status = armas.kdr and mods_outros_kdr.tipo = 'K' ";
$sql2 .= "left join mods_outros mods_outros_loaded on mods_outros_loaded.status = armas.loaded and mods_outros_loaded.tipo = 'L' ";
$sql2 .= "where armas.nome = '$nome'";
$consulta2 = mysqli_query($conexao,$sql2);
$registros2 = mysqli_num_rows($consulta2);
$print_pc = "<center><table width='95%'>";
$print_mob = "<center><table>";
while($exibirRegistros2 = mysqli_fetch_array($consulta2)){
$dano = $exibirRegistros2(0);
$peso = $exibirRegistros2(1);
$peso_conv = round($exibirRegistros2(1)/2.2046,3);
$cadencia = $exibirRegistros2(2);
$precisao = $exibirRegistros2(3);
$recuo = $exibirRegistros2(4);
$alcance = number_format($exibirRegistros2(5),0,",",".");
$alcance_conv = number_format($exibirRegistros2(5)/3.2808,0,",",".");
$municao = $exibirRegistros2(6);
$total = $exibirRegistros2(7);
$silenciador = $exibirRegistros2(10);
$scope = $exibirRegistros2(11);
$pente = $exibirRegistros2(12);
$balas = $exibirRegistros2(13);
$mira = $exibirRegistros2(14);
$kfi = $exibirRegistros2(15);
if($recuo == 0){
$recuo = "---";
}
if($municao == 0 && $total == 0){
$municao = "Infinita";
$total = "";
}else{
$municao .= " / ";
}
$cadencia_completa = "$cadencia (por minuto)";
$alcance_completo = "$alcance pés ($alcance_conv metros)";
$recursos = "";
if($silenciador == 2){
$recursos .= "Silenciador";
}
if($scope == 2){
if($recursos == ""){
$recursos = "Scope";
}else{
$recursos .= "<br>Scope";
}
}
if($pente == 2){
$recursos .= "<br>Pente";
}
if($balas == 2){
$recursos .= "<br>Balas";
}
if($mira == 2){
$recursos .= "<br>Mira de Ferro";
}
$swing = $exibirRegistros2(35);
if($swing == 1){
$recursos .= "<br><a href='atributos.html'>Mirando 100%<br><sup><span style='color: orange'>clique aqui para entender</span></sup></a>";
}
$kdr = $exibirRegistros2(8);
$kdr_imagem = $exibirRegistros2(32);
$loaded = $exibirRegistros2(9);
$loaded_imagem = $exibirRegistros2(33);
if($kdr == 1){
$recursos .= "<br><img src='$kdr_imagem' />";
}
if($loaded == 1){
$recursos .= "<br><img src='$loaded_imagem' />";
}
if($recursos == ""){
$recursos .= "Nenhum";
}
$nome_disparo1 = $exibirRegistros2(16);
$img_disparo1 = $exibirRegistros2(17);
$nome_disparo2 = $exibirRegistros2(18);
$img_disparo2 = $exibirRegistros2(19);
$nome_disparo3 = $exibirRegistros2(20);
$img_disparo3 = $exibirRegistros2(21);
if($img_disparo1 == ""){
$modo_disparo = "$nome_disparo1";
}else{
$modo_disparo = "$nome_disparo1<br><img src='$img_disparo1' />";
}
if($nome_disparo2 <> ""){
if($img_disparo2 == ""){
$modo_disparo .= "<br>$nome_disparo2";
}else{
$modo_disparo .= "<br>$nome_disparo2<br><img src='$img_disparo2' />";
}
}
if($nome_disparo3 <> ""){
$modo_disparo .= "<br>$nome_disparo3<br><img src='$img_disparo3' />";
}
$nome_patente = $exibirRegistros2(22);
$abrev_patente = $exibirRegistros2(23);
$img_patente = $exibirRegistros2(24);
$id_restricao = $exibirRegistros2(34);
if($abrev_patente <> ""){
if($id_restricao < 62){
$restricao = "<img src='$img_patente' /> $abrev_patente<br>$nome_patente";
}else{
$restricao = "$nome_patente";
}
}else{
$restricao = "$nome_patente";
}
$popularidade = $exibirRegistros2(25);
$mods_silenciador = $exibirRegistros2(26);
$mods_scope = $exibirRegistros2(27);
$mods_pente = $exibirRegistros2(28);
$mods_balas = $exibirRegistros2(29);
$mods_mira_ferro = $exibirRegistros2(30);
$mods = "<img src='$mods_silenciador' /> ";
$mods .= "<img src='$mods_scope' /> ";
$mods .= "<img src='$mods_pente' /><br>";
$mods .= "<img src='$mods_balas' /> ";
$mods .= "<img src='$mods_mira_ferro' /> ";
$descricao = $exibirRegistros2(31);
$print_pc .= "<tr><td colspan='7'><strong>$nome</strong></td></tr>";
$print_pc .= "<tr><td colspan='7'><img src='$imagem' /></td></tr>";
$print_pc .= "<tr><td colspan='7'>$descricao</td></tr>";
$print_pc .= "<tr><td><strong>Grade</strong></td><td><strong>Restrição</strong></td><td><strong>Popularidade</strong></td><td><strong>Modo de Disparo</strong></td><td><strong>Recursos</strong></td><td><strong>Modificações</strong></td><td><strong>KFI</strong></td></tr>";
$print_pc .= "<tr><td><img src='$grade' /></td><td>$restricao</td><td>$popularidade</td><td>$modo_disparo</td><td>$recursos</td><td>$mods</td><td><img src='$kfi' /></td></tr>";
$print_pc .= "<tr><td><strong>Dano</strong></td><td><strong>Peso</strong></td><td><strong>Cadência</strong></td><td><strong>Precisão</strong></td><td><strong>Recuo</strong></td><td><strong>Alcance</strong></td><td><strong>Munição</strong></td></tr>";
$print_pc .= "<tr><td>$dano</td><td>$peso lb ($peso_conv kg)</td><td>$cadencia_completa</td><td>$precisao</td><td>$recuo</td><td>$alcance_completo</td><td>$municao $total</td></tr>";
$print_pc .= "<tr><td colspan='7' bgcolor='#45B334'></td></tr>";
$print_mob .= "<tr><td colspan='2'><strong>$nome</strong></td></tr>";
$print_mob .= "<tr><td colspan='2'><img src='$imagem'/></td></tr>";
$print_mob .= "<tr><td colspan='2'>$descricao</td></tr>";
$print_mob .= "<tr><td><strong>Grade</strong></td><td><img src='$grade' /></td></tr>";
$print_mob .= "<tr><td><strong>Restrição</strong></td><td>$restricao</td></tr>";
$print_mob .= "<tr><td><strong>Popularidade</strong></td><td>$popularidade</td></tr>";
$print_mob .= "<tr><td><strong>Modo de Disparo</strong></td><td>$modo_disparo</td></tr>";
$print_mob .= "<tr><td><strong>Recursos</strong></td><td>$recursos</td></tr>";
$print_mob .= "<tr><td><strong>Modificações</strong></td><td>$mods</td></tr>";
$print_mob .= "<tr><td><strong>KFI</strong></td><td><img src='$kfi' /></td></tr>";
$print_mob .= "<tr><td><strong>Dano</strong></td><td>$dano</td></tr>";
$print_mob .= "<tr><td><strong>Peso</strong></td><td>$peso lb ($peso_conv kg)</td></tr>";
$print_mob .= "<tr><td><strong>Cadência de Tiro</strong></td><td>$cadencia_completa</td></tr>";
$print_mob .= "<tr><td><strong>Precisão</strong></td><td>$precisao</td></tr>";
$print_mob .= "<tr><td><strong>Recuo</strong></td><td>$recuo</td></tr>";
$print_mob .= "<tr><td><strong>Alcance</strong></td><td>$alcance_completo</td></tr>";
$print_mob .= "<tr><td><strong>Munição</strong></td><td>$municao $total</td></tr>";
$print_mob .= "<tr><td colspan='2' bgcolor='#45B334'></td></tr>";
}
$count_acr_b3 .= +1;
$print_acr_b3 .= "<section><div class='content'><header>";
$print_acr_b3 .= "<img src='$grade' /><br>$nome<br><img src='$imagem' /><br><br>";
$print_acr_b3 .= "<button type='submit' class='btn btn-default' data-toggle='modal' data-target='#myModal' value='$detalhes'><span class='glyphicon glyphicon-envelope'></span>Detalhes</button>";
$print_acr_b3 .= "</header></div></section>";
$count_acr_t = $count_acr_b3;
$print_aux = ($count_acr_b3 > 0 ? "{$print_acr_b3}" : "");
$print_acr = "{$print_inicio} {$print_aux} {$print_final}";
}
$print_pc .= "</table></center>";
$print_mob .= "</table></center>";
$iphone = strpos($_SERVER('HTTP_USER_AGENT'),"iPhone");
$ipad = strpos($_SERVER('HTTP_USER_AGENT'),"iPad");
$android = strpos($_SERVER('HTTP_USER_AGENT'),"Android");
$palmpre = strpos($_SERVER('HTTP_USER_AGENT'),"webOS");
$berry = strpos($_SERVER('HTTP_USER_AGENT'),"BlackBerry");
$ipod = strpos($_SERVER('HTTP_USER_AGENT'),"iPod");
$symbian = strpos($_SERVER('HTTP_USER_AGENT'),"Symbian");
if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian == true) {
$detalhes = $print_mob;
}else{
$detalhes = $print_pc;
}
print "<button class='collapsible'><center><strong>Família Adaptive Combat Rifle (ACR)</strong></center></button><div class='content' style='display: none'>$print_acr</div>";
print "<br><br>";
print $detalhes;
mysqli_close($conexao);
?>
</center>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><strong>Detalhes</strong></h4>
</div>
<div class="modal-body">
<input type="text" id="valueof">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">$('#prab').click(function(e){
// alert($(e.target).val());
document.getElementById("valueof").value = $(e.target).val();})
</script>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/abas.js"></script>
<script src="assets/js/collapse.js"></script>
</body>
</html>