Question

I have a table where the last tag “td” got a call to a modal window. The problem is that only works for first modal window when it is hidden the page reloads, but for the other modal windows reload does not work.

<a class="icon-remove-sign" id="exclusao" href="#modalExclude{{janela.campanha.id}}" data-toggle="modal" title="Excluir"></a> 
// this generate the following urls:
// http://localhost:8000/display/detail/15/#modalExclude11
// http://localhost:8000/display/detail/15/#modalExclude12
// http://localhost:8000/display/detail/15/#modalExclude13

The JQuery code:

$(function() {
    $('#exclusao').click(function() {
        var modal = $(this).attr('href');
        console.log(modal); // show the href only for the first row --> #modalExclude11
        // show modal
        $(modal).modal({
            show: false,
        });
        // clean message info in modal
        $('div#messageExclude').html('');
        // reload page when modal is hidden
        $(modal).on('hidden', function() {
            window.location.reload(true) // work only for the first row --> #modalExclude11
        });

    });
});

All modals are shown correctly, but only makes the page reload to the first row of the table. Does anyone know what can be?
Thanks!

Answer 1

The problem are the ID in:

<a class="icon-remove-sign" id="exclusao" href="#modalExclude{{janela.campanha.id}}" data-toggle="modal" title="Excluir"></a>

Need work with CLASS, I forgeted that the ID must be unique in code, but with class is working.

class="icon-remove-sign"

Thanks!