2

Tenho uma tabela com um botão para adicionar um comentário sobre o item daquela linha. Nesse botão tenho um class = adicionar que me permite aplicar à todos com essa classe a ação de abrir um modal do bootstrap. Meu problema é que não sei identificar qual desses botões foi o ativador do modal para mudar o estilo dele, que ao invés de ficar um + para adicionar, deve ficar um ícone para visualizar. Alguém teria uma solução de como saber qual botão .adicionar foi acionado depois que o usuário clicar no botão btn_add_observacao?

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Aluno</th>
            <th>Nota</th>
            <th width="5%" title="Observação">Obs.</th>
            <th width="5%">Ação</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Rafael</td>
            <td>6.58</td>
            <td title="Observação">                                                    
                <button type="button" class="btn btn-xs btn-success adicionar" title="Adicionar Observação" data-toggle="modal" data-target="#modal_observacao">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </td>
            <td>
                <button type="button" class="btn btn-xs btn-danger remover">
                    <span class="glyphicon glyphicon-remove"></span> Remover
                </button>
            </td>
        </tr>

    </tbody>

</table>

<!-- Modal Adicionar Observação -->
<div class="modal fade" id="modal_observacao" tabindex="-1" role="dialog" aria-labelledby="titulo" aria-hidden="true">
    <div class="modal-dialog">
        <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>
                <h3 class="modal-title" id="titulo">Observação</h3>
            </div>

            <div class="modal-body">
                <label for="texto_observacao" class="required">Digite no espaço abaixo a observação para esse pedido</label>
                <textarea class="form-control" id="texto_observacao" name="texto_observacao" rows="5"></textarea>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btn_add_observacao" name="btn_add_observacao" >Adicionar</button>
            </div>

        </div>
    </div>
</div>
3
  • Poste a parte relevante de seu código o para entendermos melhor.
    – abfurlan
    16/03/2015 às 20:58
  • Poste o código javascript que você já tem... (apenas as partes relevantes)
    – Oeslei
    17/03/2015 às 17:26
  • Ainda não fiz o javascript. Através dos atributos data- nos botões, o js do bootstrap faz aparecer e esconder o modal.
    – rhandrade
    17/03/2015 às 18:03

1 Resposta 1

2

A partir do Bootstrap v3.0.0, podes apurar o elemento que fez abrir a modal da seguinte forma:

$('#id-da-modal').on('show.bs.modal', function (e) {
    var $botaoQueAbriu = $(e.relatedTarget);
});

Ver demonstração no JSFiddle.

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 .