Modal with id=Undefined

Question

Guys I’m having trouble with a code.

The fragment below calls the modal:

<a href="#" class="btn btn-default btn-sm" data-toggle="modal" data-target="#delete-modal" data-client="<?php echo $cliente['id']; ?>"><span class="glyphicon glyphicon-trash"></span></a>

The modal code is this one:

<!-- MODAL DELETE -->
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modalLabel">Excluir Orçamento</h4>
            </div>
            <div class="modal-body">Deseja realmente excluir este orçamento?</div>
            <div class="modal-footer">
                <a id="confirm" class="btn btn-primary" href="#">Sim</a>
                <a id="cancel" class="btn btn-default" data-dismiss="modal">Não</a>
            </div>
        </div>
    </div>
</div>

The JS that makes the bridge is this one:

// PASSA UM ID PARA O MODAL E ATUALIZA O LINK PARA EXCLUSÃO
$('#delete-modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);
    var id = button.data('service');
    var modal = $(this);
    modal.find('.modal-title').text('Registro: ' + id);
    modal.find('#confirm').attr('href', 'delete.php?id=' + id);
})

When I click the delete button, the modal opens but the value being assigned to the ID variable (exclusion code) is equal to Undefined.

The URL looks like this: gfinan/clients/delete.php? id=Undefined

Where am I going wrong?

Answer 1

See this excerpt from the code:

var button = $(event.relatedTarget);
var id = button.data('service');

The first line you take the button that opened the modal. In the second you are trying to get the value of the attribute data-service button, but this attribute does not exist, see:

<a href="#" class="btn btn-default btn-sm" data-toggle="modal" data-target="#delete-modal" data-client="<?php echo $cliente['id']; ?>">
   <span class="glyphicon glyphicon-trash"></span>
</a>

There is an attribute data-client, but I don’t think that’s the amount you want to take(?).

What you should do is insert the attribute into the button data-service and put in it the code you want, something like:

<a data-service="<?php echo $CÓDIGO DO ID; ?>" href="#"...

Where has $CÓDIGO DO ID; you put the code that pulls the id of the one you want to delete.

---

If it is the value in data-client which is what you want to send, then just change the second line of the quote at the beginning of the reply by:

var id = button.data('client');