Problems with closing and opening Modals Bootstrap - Asp.net MVC windows

Question

I created two types of modal windows to dynamically open Partialviews: modalGenerica (open large windows) and modalGenericaPequena (open small windows). When I open the two overlapping windows (First the Modalgenerica and over the modalGenericaPequena) they are perfectly positioned.

The problem happens when I close both Modals windows and try to open them again... When opening the first modal, it opens using the structure of the second... It seems that the last order window is being used:

If I close all the modals and update the browser, they start working again, but after I close them, the problem starts again... I tried to clean the content-modal of the two windows, but it’s not working...

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

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

Does anyone know how to solve this problem?

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>

Individual JS of the First 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;
        }
    });    
}

Individual JS of the Second 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;
        }
    });
}

Answer 1

It is using 2 repeated functions with the same name, but each one dealing with a different modal:

bindForm() and openmodal()

When you declare a function, it goes to memory. If you redeclare the same function (with the same name), the content of the one in memory is replaced by the new one.

With this, it is causing the two to treat only the modal with the id #contentModalGenericaPequena. You will solve this using distinct names in the functions and avoiding repetition.

For example: bindForm1(), openmodal1(), bindForm2() and openmodal2().

Or just use 1 generic function passing arguments to identify which modal to treat. But that’s another question.