0

Meus queridos,

Tenho uma tabela de usuários, sendo que pra cada usuário tenho um button que abre um modal:

{% for item in lista_usuarios %}
    <tr>
        <td>{{ item.first_name }}</td>

        <button data-target="modal1" class = "oi" type = "button" value="{{item.id}}"  class = "btn waves-effect waves-light blue" data-index="{{item.id}}" onclick="$('#modal1').modal('open');" >
            <i class="large material-icons">clear</i>
        </button>
        </td>
    </tr>

Como podem ver, o value desse button já está pegando o id de cada usuário, isso está correto.

Dentro do modal, tenho uma label e preciso que o valor desse id seja passado para ela.

 <input type="text" class="usuario">

<script>

    $(document).ready(function(){
        $(".oi").each(function() {
            $(this).click(function() {
                alert("teste");
                $('.modal').modal();
                var id = $(".oi").val();
                alert(id);
                $(".usuario").val(id);
            });
        });
    });


</script>

O modal está funcionando e os 2 alerts também. Porém está passando o mesmo id de usuário sempre, tá passando somente o id do primeiro usuário para a label dentro do modal.

3
  • 2
    Ao invés de fazer var id = $(".oi").val(), tente fazer var id = $(this).val()
    – Woss
    Commented 25/10/2017 às 13:42
  • Obrigada Anderson, era só isso! Mas você sabe me dizer pq do modo como eu fiz não estava dando certo?
    – Bianca C.
    Commented 25/10/2017 às 16:01
  • Bianca, sim, pois fazendo $(".oi")você buscará todos os elementos da página que possuem a classe oi e fazendo .val() será retornado sempre o valor do primeiro item da lista. Com $(this) você seleciona apenas o elemento que deseja e, assim, .val() retorna o valor desejado.
    – Woss
    Commented 25/10/2017 às 16:20

1 Resposta 1

1

Não vejo necessidade de utilizar $.each nesse caso. Siga o exemplo abaixo e implemente à sua realidade que irá funcionar.

$(document).ready(function(){
  $('body').on ('click', 'table > tbody > tr > td button.oi', function (ev) {
    console.log ($(this).val());
  });
    
});

var openModal = function () {
  console.log ('Executando openModal.');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>item 10</td>
      <td>
        <button data-target="modal1" class = "oi" type = "button" value="10"  class = "btn waves-effect waves-light blue" data-index="10" onclick="openModal();" >
          <i class="large material-icons">clear</i>
        </button>
      </td>
    </tr>
    <tr>
      <td>item 20</td>
      <td>
        <button data-target="modal1" class = "oi" type = "button" value="20"  class = "btn waves-effect waves-light blue" data-index="20" onclick="openModal();" >
          <i class="large material-icons">clear</i>
        </button>
      </td>
    </tr>
    <tr>
      <td>item 30</td>
      <td>
        <button data-target="modal1" class = "oi" type = "button" value="30"  class = "btn waves-effect waves-light blue" data-index="30" onclick="openModal();" >
          <i class="large material-icons">clear</i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

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 .