I have a dynamic listing with PHP, and when I click on a "< tr >" of the table that is listed, it should open a modal with various information. What I want to do is assign certain values of the listing to Data-attributes, and with Jquery, I want to get the values of those data * and put in the contents of this modal that will be opened. I have only one date and a field, because I believe that making one work, you can do with another.
<script type="text/javascript">
$(document).ready(function(){
$(".teste").click(function(){
var val = $(".teste").data("pro");
$("#pro").val(val);
});
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table class="table">
<tr data-toggle="modal" class="teste" data-target="#exampleModal" data-pro="teste">
<td>teste</td>
<td>teste</td>
<td>teste</td>
<td>teste</td>
</tr>
</table>
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">OS nº1226</h5>
<label>
Emissão: dd/mm/yyyy
</label>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
Nome: fulano de tal da silva
</div>
</div>
<div class="row">
<div class="col-md-6">
CPF: 000.000.000-00
</div>
<div class="col-md-6">
Telefone: (00)0000-0000
</div>
</div>
<div class="row">
<div class="col-md-4">
Veículo: brasilia
</div>
<div class="col-md-4">
Placa: abc-0000
</div>
<div class="col-md-4">
Status:
<form class="select_OS">
<select>
<option value="nenhum">--status--</option>
<option value="emitida">Emitida</option>
<option value="em_orcamento">Em orçamento</option>
<option value="aguardando">Aguardando resp.cliente</option>
<option value="aguardando">Ordem autorizada</option>
<option value="em_exec">Em Execução</option>
<option value="finalizada">Finalizada</option>
</select>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12" id="pro">
Defeito apresentado:
<p>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
Solução:
<br>
<p>
solucao
solucao
solucao
</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar janela</button>
<button type="button" class="btn btn-primary">Salvar</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>