Modify a button property when closing modal bootstrap

Asked

Viewed 1,214 times

2

I have a table with a button to add a comment on the item of that line. On this button I have a class = adicionar which allows me to apply to everyone with this class the action of opening a modal of bootstrap. My problem is that I don’t know which of these buttons was the modal activator to change his style, which instead of being one + to add, there should be an icon to view. Someone would have a solution of how to know which button .adicionar was triggered after the user click the button 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>
  • Post the relevant part of your code to understand better.

  • Post the javascript code you already have... (only the relevant parts)

  • I have not yet made javascript. Using attributes data- on buttons, bootstrap js make appear and hide modal.

1 answer

2


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

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

See demonstration in Jsfiddle.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.