Multiple modal bootstrap always returning the same content

Question

I’m developing an Asp.net mvc application, on one of the pages of the site I call several bootstrap modals over each other, however, when you already have an open modal the new appears with the same content as the old, follows code snippets.

$('#menuLista').click(function () {
    //$('.modal-container').removeData('bs.modal');
    $.get('@Url.Action("MenuListas")',
    { idE: '@ViewBag.idEvento' },
    function (data) {
        $('#fecharModalEv').click();
        $('#modalMnLista').find('.modal-content:first').html(data);
        $('#modalMnLista').modal({ show: true });
    }).error(function () {
        alert('ocorreu um erro ao abrir  janela');
    });

    $.get(url, function (data) {
        $('.modal-content').html(data);
        $('#modal-container').modal('show');
    });             
}

<div id="modal-container" class="modal fade"
         tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>
<div id="modalMnLista" class="modal fade"
         tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content"></div>
    </div>
</div>

I pasted some snippets right here not containing the script tags, etc.

I use the jquery Ajax to return partialViews inside the modal, in the first call fill the div 'modal-container', in the second fill the 'Modalmnlista''.

Would anyone know the reason why the code is coming the same when running 2 Gets returning different content?

Answer 1

You are applying html to all Divs with the class .modal-content in his second ajax: $('.modal-content').html(data);

Try to change

$('.modal-content').html(data);

for

$('#modal-container').find('.modal-content:first').html(data);

in your second get ajax.