1

Criei dois tipos de janelas modais para abrir dinamicamente PartialViews: modalGenerica (abrir janelas grandes) e modalGenericaPequena (Abrir janelas pequenas). Quando eu abro as duas janelas sobrepostas (Primeiro a ModalGenerica e por cima a modalGenericaPequena) elas ficam perfeitamente posicionadas.

inserir a descrição da imagem aqui

O problema acontece quando eu fecho as duas janelas Modals e tento abri-las novamente... Ao abrir a primeira modal, ela abre usando a estrutura da segunda... Parece que última janela da ordem fica sendo usada:

inserir a descrição da imagem aqui

Se eu fechar todas as modals e atualizar o navegador, elas voltam a funcionar, mas depois que as fecho, começa o problema novamente... Eu tentei limpar o content-modal das duas janelas, mas não está funcionando...

$('#modalGenericaPequena').on('hidden.bs.modal', function () {
    $('#contentModalGenericaPequena').html('');
});

$('#modalGenerica').on('hidden.bs.modal', function () {
    $('#contentModalGenerica').html('');
});

Alguém sabe como resolver esse problema?

Modals:

<div class="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div id="contentModal">
            </div>
        </div>
    </div>
</div>


<div class="modal fade" role="dialog" id="modalGenericaPequena" tabindex="-1" data-backdrop="static" aria-hidden="true" aria-labelledby="modal-title">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div id="contentModalGenericaPequena">
            </div>
        </div>
    </div>
</div>

JS individual da Primeira Modal:

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    // busca os elementos do atributo data-modal e os inscreve no evento click
    $('a[data-modal]').on('click', function (e) {
        // Abre a janela modal com o formulario solicitado 
        openmodal(this.href);
        return false;
    });

    $('#modalGenerica').on('hidden.bs.modal', function () {
        $('#contentModal').html('');
    });

    //Este evento faz com que não seja feito submit da page quando pressionada a tecla Enter
    $(document).on('keypress', function (e) {
        if (e.keyCode == 13) {
            e.preventDefault();
        }
    });    
});

function openmodal(url) {
    // Faz uma requisição get e carrega o formulário na janela modal
    $('#contentModal').load(url, function () {
        $('#modalGenerica').modal({
            keyboard: true
        }, 'show');       

        // Inscreve o evento submit
        bindForm(this);
    });

}

function bindForm(dialog) {
    // Inscreve o formulário na janela modal com o evento submit
    $('form', dialog).submit(function (e, i) {
        if ($(this).valid() || i) {
            // Realiza una requisição ajax
            $.ajax({               
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // Se a requisição for satisfatória, recarrega a página atual
                    if (result.success) {
                        window.location = window.location;
                    } else {
                        $('#contentModal').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        } else {
            return false;
        }
    });    
}

JS individual da Segunda Modal:

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    // busca os elementos do atributo data-modal e os inscreve no evento click
    $('#btn-add-contato').on('click', function (e) {


        // Abre a janela modal com o formulario solicitado
        openmodal(this.href);
        return false;
    });

    $('#modalGenericaPequena').on('hidden.bs.modal', function () {
        $('#contentModalGenericaPequena').html('');
    });

    //Este evento faz com que não seja feito submit da page quando pressionada a tecla Enter
    $(document).on('keypress', function (e) {
        if (e.keyCode == 13) {
            e.preventDefault();
        }
    });
});

function openmodal(url) {
    // Faz uma requisição get e carrega o formulário na janela modal
    $('#contentModalGenericaPequena').load(url, function () {

        $('#modalGenericaPequena').modal({
            keyboard: true
        }, 'show');

        // Inscreve o evento submit
        bindForm(this);

        //Remove Modal Spinner
    });
}

function bindForm(dialog) {
    // Inscreve o formulário na janela modal com o evento submit
    $('form', dialog).submit(function (e, i) {
        if ($(this).valid() || i) {
            // Realiza una requisição ajax
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // Se a requisição for satisfatória, recarrega a página atual
                    if (result.success) {
                        window.location = window.location;
                    } else {
                        $('#contentModalGenericaPequena').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        } else {
            return false;
        }
    });
}
2
  • A princípio dá pra ver que vc está usando funções repetidas, sendo cada uma com propósitos diferentes: bindForm() e openmodal(). Isso significa que a segunda função irá substituir a primeira com o mesmo nome, e isso pode resultar em comportamento inesperado.
    – Sam
    Commented 6/03/2019 às 22:05
  • Realmente @Sam!!!! Mudei os nomes das functions e funcionou certinho! Pensei que, mesmo estando em arquivos js separados não houvesse esse problema... Jamais iria imaginar... Comentá lá no Post principal para eu marcar como resposta!!! Obrigado :)
    – Master JR
    Commented 6/03/2019 às 22:34

1 Resposta 1

1

Está usando 2 funções repetidas com o mesmo nome, porém cada qual tratando de uma modal diferente:

bindForm() e openmodal()

Quando você declara uma função, ela vai pra memória. Se você redeclarar a mesma função (com o mesmo nome), o conteúdo da que estava na memória é substituído pelo novo.

Com isso, está fazendo com que as duas tratem apenas a modal com o id #contentModalGenericaPequena. Você irá resolver isso usando nomes distintos nas funções e evitando repetição.

Por exemplo: bindForm1(), openmodal1(), bindForm2() e openmodal2().

Ou então usar apenas 1 função genérica passando argumentos para identificar qual modal a ser tratada. Mas isso já é outra questão.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .