2

Estou tentando capturar o valor de um input de um modal assim que o mesmo é aberto. Fiz da seguinte forma, mas não deu certo:

 $('#modal').on('show.bs.modal', function (e) {
 var var_tipo = $("#campo_tipo").val();

 //testando variavel
 alert(var_tipo);
 });

Usei um alert para verificar se a variavel está sendo carregada. Neste caso, ele carrega o valor da modal anterior. O que estou fazendo de errado?

5
  • Quantos #campo_tipo vc tem no seu HTML? Commented 14/02/2017 às 18:47
  • Estava lendo sobre a modal do Bootstrap. Já tentou trocar o "show.bs.modal" para "shown.bs.modal" ?
    – Ricardo
    Commented 14/02/2017 às 18:50
  • Só tem um #campo_tipo
    – Luis
    Commented 14/02/2017 às 18:51
  • 1
    Realmente, Ricardo! Deu certo da forma que você sugeriu.
    – Luis
    Commented 14/02/2017 às 18:53
  • @Luis marca a resposta para fechar o post como resolvido.
    – Ricardo
    Commented 15/02/2017 às 14:54

2 Respostas 2

2

Você utilizou o evento errado.

De acordo com a documentação do Bootstrap para a modal, o evento correto para quando a modal estiver totalmente aberta é o shown.bs.modal.

O evento show.bs.modal é disparado quando a modal é chamada, por isso a variável estava com os dados da modal anterior.

Já com o evento shown.bs.modal, ele é disparado quando a modal está totalmente aberta/visível. Com isso, a variável pega o valor atual.

Seu código ficaria assim:

 $('#modal').on('shown.bs.modal', function (e) {
 var var_tipo = $("#campo_tipo").val();

 //testando variavel
 alert(var_tipo);
 });
4
  • Você poderia evitar uma resposta desnecessária usando os comentários, seria mais útil para a comunidade. Commented 15/02/2017 às 13:41
  • Mas esta resposta é a correta. Comentei alí em cima e ele agradeceu. Apenas respondi para ele marcar como resolvido e não deixar a pergunta aberta.
    – Ricardo
    Commented 15/02/2017 às 14:51
  • Então, mas a resposta não é tão objetiva, você simplesmente diz pra trocar um termo, poderia dar mais detalhes, ou uma breve citação ao invés de só adicionar um link para a documentação do bootstrap, algo que esclareça quaisquer duvidas provenientes da sua resposta Commented 15/02/2017 às 14:53
  • Editei a resposta, mas nada diferente da que eu tinha postado antes. Eu sei as respostas devem ser claras e explicativas, mas também não é pra deixar totalmente mastigado ou encher linguiça com informações que não são importantes. Mas tudo bem..
    – Ricardo
    Commented 15/02/2017 às 15:09
1

Atenção ao modo correto de chamar o evento. Se o caso é disparar ao mostrar um novo modal, o certo é shown.bs.modal:

$(function() {
  $('#myModal').on('shown.bs.modal', function (e) {
   var var_tipo = $("#campo_tipo").val();
   alert(var_tipo);
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<input type="hidden" id="campo_tipo" value="tipo">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" 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">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        Demo
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

show.bs.modal usa a instância ativa, enquanto que shown.bs.modal vai disparar o evento apenas depois do carregamento do novo modal, e isso evita que a instância anterior interfira.

Fonte: Events.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .