Modify a button's property when closing modal bootstrap

2

I have a table with a button to add a comment about the item on that row. In this button I have a class = adicionar that allows me to apply to all with this class the action of opening a bootstrap modal. My problem is that I can not identify which of these buttons was the modal trigger to change the style of it, which instead of being + to add, should be an icon to view. Would anyone have a solution on how to know which .adicionar button was triggered after the user clicked the btn_add_observacao button?

<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>
    
asked by anonymous 16.03.2015 / 21:12

1 answer

2

From Bootstrap v3.0.0, you can check the element that opened the modal as follows:

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

View demo on JSFiddle .

    
28.03.2015 / 22:05