Retornar valores para modal em Java Script

28/02/2020

0

Olá!

Estou com uma dúvida referente ao JavaScript com Bootstrap em jQuery.
Preciso atribuir o valor que está na "data-whatever" para os recipientes do modal.find em uma modal. Porém não está puxando o valor.
Segue código e versão do bootstrap que está sendo utilizada.

<td><button type="button" class="btn btn-xs btn-primary" data-toggle="modal" data-target="#myModal<?php echo $tabela[''''F1'''']; ?>">Visualizar</button>
<button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#ExampleModal" data-whateverf1="<?php echo $tabela[''''F1'''']; ?>" data-whateverato="teste" data-whatevercnpj="<?php echo $tabela[''''CNPJ'''']; ?>" data-whatevercpf="<?php echo $tabela[''''CPF'''']; ?>" data-whateverident="<?php echo $tabela[''''IDENTIDADE'''']; ?>" data-whatevernome="<?php echo $tabela[''''NOME'''']; ?>" data-whatevernomecor="<?php echo $tabela[''''NOME CORRIGIDO'''']; ?>" data-whateverquali="<?php echo $tabela[''''QUALIFICAÇÃO'''']; ?>" data-whatevernamefile="<?php echo $tabela[''''NAME FILE'''']; ?>" data-whatevernumreg="<?php echo $tabela[''''NUMERO_REGISTRO'''']; ?>" data-whateverliv="<?php echo $tabela[''''LIVRO'''']; ?>">Editar</button>
<button type="button" class="btn btn-xs btn-danger">Apagar</button>
</td>
</tr>
<!-- Inicio Modal -->
<div class="modal fade" id="myModal<?php echo $tabela[''''F1'''']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center" id="myModalLabel"><?php echo $tabela[''''F1'''']; ?></h4>
</div>
<div class="modal-body">
<p><label for="message-text" class="control-label">ID: </label><?php echo $tabela[''''F1'''']; ?></p>
<p><label for="message-text" class="control-label">Número do ato: </label><?php echo $tabela[''''NUMERO DO ATO'''']; ?></p>
<p><label for="message-text" class="control-label">CNPJ: </label><?php echo $tabela[''''CNPJ'''']; ?></p>
<p><label for="message-text" class="control-label">CPF: </label><?php echo $tabela[''''CPF'''']; ?></p>
<p><label for="message-text" class="control-label">Identidade: </label><?php echo $tabela[''''IDENTIDADE'''']; ?></p>
<p><label for="message-text" class="control-label">Nome: </label><?php echo $tabela[''''NOME'''']; ?></p>
<p><label for="message-text" class="control-label">Nome corrigido: </label><?php echo $tabela[''''NOME CORRIGIDO'''']; ?></p>
<p><label for="message-text" class="control-label">Qualificação: </label><?php echo $tabela[''''QUALIFICAÇÃO'''']; ?></p>
<p><label for="message-text" class="control-label">Nome do arquivo: </label><?php echo $tabela[''''NAME_FILE'''']; ?></p>
<p><label for="message-text" class="control-label">Número do registro: </label><?php echo $tabela[''''NUMERO_REGISTRO'''']; ?></p>
<p><label for="message-text" class="control-label">Livro: </label><?php echo $tabela[''''LIVRO'''']; ?></p>
</div>
</div>
</div>
</div>
<!-- Fim Modal -->
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>




<div class="modal fade" id="ExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Alterar</h4>
</div>
<div class="modal-body">
<form method="POST" action="http://192.168.1.140:888/modal/processa.php" enctype="multipart/form-data">
<div class="form-group">
<label for="message-text" class="control-label">Número do Ato:</label>
<input name="nome" type="text" class="form-control" id="atopess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">CNPJ:</label>
<input name="nom1" type="text" class="form-control" id="cnpjpess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">CPF:</label>
<input name="nome2" type="text" class="form-control" id="cpfpess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Identidade:</label>
<input name="nome3" type="text" class="form-control" id="identpess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Detalhes:</label>
<textarea name="nome4" class="form-control" id="nomepess"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="control-label">Nome Corrigido:</label>
<input name="nome5" type="text" class="form-control" id="nomecorr">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Qualificação:</label>
<input name="nome6" type="text" class="form-control" id="qualipess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Nome do Arquivo:</label>
<input name="nome7" type="text" class="form-control" id="namefilepess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Número do Registro:</label>
<input name="nome8" type="text" class="form-control" id="numregpess">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Livro:</label>
<input name="nome9" type="text" class="form-control" id="livpess">
</div>
<input name="id" type="hidden" class="form-control" id="f1pess" value="">

<button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
<button type="submit" class="btn btn-danger">Alterar</button>

</form>
</div>

</div>
</div>
</div>


<!-- jQuery (necessary for Bootstrap''''s JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_js/bootstrap.min.js"></script>
<script type="text/javascript">
$(''''#ExampleModal'''').on(''''show.bs.modal'''', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipientf1 = button.data(''''whateverf1'''') // Extract info from data-* attributes
var recipientato = button.data(''''whateverato'''')
var recipientcnpj = button.data(''''whatevercnpj'''')
var recipientcpf = button.data(''''whatevercpf'''') // Extract info from data-* attributes
var recipientident = button.data(''''whateverident'''')
var recipientnome = button.data(''''whatevernome'''')
var recipientnomecor = button.data(''''whatevernomecor'''') // Extract info from data-* attributes
var recipientquali = button.data(''''whateverquali'''')
var recipientnamefile = button.data(''''whatevernamefile'''')
var recipientnumreg = button.data(''''whatevernumreg'''') // Extract info from data-* attributes
var recipientliv = button.data(''''whateverliv'''')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal''''s content. We''''ll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find(''''.modal-title'''').text(''''Alterar linha: '''' + recipient)
modal.find(''''.modal-body input'''').val(recipientf1)
modal.find(''''.modal-body input'''').val(recipientato)
modal.find(''''#cnpjpess'''').val(recipientcnpj)
modal.find(''''#cpfpess'''').val(recipientcpf)
modal.find(''''#identpess'''').val(recipientident)
modal.find(''''#nomepess'''').val(recipientnome)
modal.find(''''#nomecorr'''').val(recipientnomecor)
Felipe

Felipe

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar