0

Como parte de un menú contextual asociado a los nodos de un JStree muestro un formulario en un diálogo de Bootstrap 3, y dos de sus campos son Select2. sucede que al enviar el formulario con errores, deja de funcionar el Select2. Realmente no se dónde ubicar o el selector A emplear para que se mantenga el efecto del Select2 si hubiera error en el formulario.

$(document.body).find('#modalCrearEstructura').remove();
                                $(document.body).append("<div id='modalCrearEstructura' class='modal fade' tabindex='-1'  role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Cerrar'><span aria-hidden='true'>&times;</span></button><h5 class='modal-title' id='myModalLabel'><strong>Crear Estructura</strong></h5></div><div class='modal-body'><div id='contenedorForm' class='container-fluid'></div></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button><button id='btnSalvar' type='button' class='btn btn-primary'>Guardar</button></div></div></div></div>");
                                $("#contenedorForm").html(data);
                                $('#modalCrearEstructura').modal({
                                    keyboard: false,
                                    backdrop: 'static'
                                }).on('shown.bs.modal', function (e) {
                                    e.preventDefault();
                                    $(this).find('#colaborador_perfilColaborador, #colaborador_provinciaCuba').select2({
                                        dropdownParent: $('#modalCrearEstructura')
                                    });
                                    $('#contenedorForm form').on('submit', function (e) {
                                        e.preventDefault();
                                        return false;
                                    });
                                    var dialogo = $(this);
                                    $("#btnSalvar").on('click', function (e) {
                                        e.preventDefault();
                                        var btn = $(this);
                                        if (!btn.hasClass('disabled')) {
                                            $.ajax({
                                                dataType: 'json',
                                                type: 'POST',
                                                url: $("#modalCrearEstructura").find("form").attr('action'),
                                                data: $("#modalCrearEstructura").find("form").serialize(),
                                                beforeSend: function () {
                                                    btn.toggleClass('disabled');
                                                    $('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
                                                }
                                            }).done(function (data) {
                                                if (inst.is_open(node)) {
                                                    inst.create_node(node, data, 'last');
                                                } else {
                                                    inst.refresh_node(node);
                                                    inst.open_node(node);
                                                }
                                                cargarVistaCentral(node);
                                                $('#modalCrearEstructura').modal('hide');
                                            }).fail(function (jqXHR) {
                                                if (jqXHR.status === 401) {
                                                    window.location = _HOMEPAGE;
                                                } else if (jqXHR.status === 406) {
                                                    $(dialogo).find('#contenedorForm').html(jqXHR.responseText);
                                                } else {
                                                    $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
                                                }
                                            }).always(function () {
                                                btn.toggleClass('disabled');
                                                if (!$('#indicador').hasClass("cargando-satisfactorio")) {
                                                    setTimeout(function () {
                                                        $('#indicador').fadeOut('fast', function () {
                                                            $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                                                        });
                                                    }, 3000);
                                                } else {
                                                    $('#indicador').fadeOut('fast', function () {
                                                        $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                                                    });
                                                }
                                            });
                                        } else {
                                            return false;
                                        }
                                    });

                                }).on('hidden.bs.modal', function (e) {
                                    e.preventDefault();
                                    $('#modalCrearEstructura').remove();
                                });
2
  • Podrias adjuntar que error te da ?
    – Capt.Teach
    el 2 mar. 2020 a las 18:28
  • no da error, simplemente se pierde el efecto Select2 de los campos.
    – Francisco
    el 2 mar. 2020 a las 18:30

1 respuesta 1

0

la solución estuvo basada en quitar el código que convierte los select en Select2 del código anterior. Quedando de la siguiente manera:

$(document.body).find('#modalCrearEstructura').remove();
                                $(document.body).append("<div id='modalCrearEstructura' class='modal fade' tabindex='-1'  role='dialog'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Cerrar'><span aria-hidden='true'>&times;</span></button><h5 class='modal-title' id='myModalLabel'><strong>Crear Estructura</strong></h5></div><div class='modal-body'><div id='contenedorForm' class='container-fluid'></div></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Cerrar</button><button id='btnSalvar' type='button' class='btn btn-primary'>Guardar</button></div></div></div></div>");
                                $("#contenedorForm").html(data);
                                $('#modalCrearEstructura').modal({
                                    keyboard: false,
                                    backdrop: 'static'
                                }).on('shown.bs.modal', function (e) {
                                    e.preventDefault();                                        
                                    $('#contenedorForm form').on('submit', function (e) {
                                        e.preventDefault();
                                        return false;
                                    });
                                    var dialogo = $(this);
                                    $("#btnSalvar").on('click', function (e) {
                                        e.preventDefault();
                                        var btn = $(this);
                                        if (!btn.hasClass('disabled')) {
                                            $.ajax({
                                                dataType: 'json',
                                                type: 'POST',
                                                url: $("#modalCrearEstructura").find("form").attr('action'),
                                                data: $("#modalCrearEstructura").find("form").serialize(),
                                                beforeSend: function () {
                                                    btn.toggleClass('disabled');
                                                    $('#indicador').addClass('cargando-satisfactorio').slideDown('fast');
                                                }
                                            }).done(function (data) {
                                                if (inst.is_open(node)) {
                                                    inst.create_node(node, data, 'last');
                                                } else {
                                                    inst.refresh_node(node);
                                                    inst.open_node(node);
                                                }
                                                cargarVistaCentral(node);
                                                $('#modalCrearEstructura').modal('hide');
                                            }).fail(function (jqXHR) {
                                                if (jqXHR.status === 401) {
                                                    window.location = _HOMEPAGE;
                                                } else if (jqXHR.status === 406) {
                                                    $(dialogo).find('#contenedorForm').html(jqXHR.responseText);
                                                } else {
                                                    $('#indicador').removeClass('cargando-satisfactorio').addClass('cargando-error').html(jqXHR.responseText);
                                                }
                                            }).always(function () {
                                                btn.toggleClass('disabled');
                                                if (!$('#indicador').hasClass("cargando-satisfactorio")) {
                                                    setTimeout(function () {
                                                        $('#indicador').fadeOut('fast', function () {
                                                            $(this).removeClass('cargando-error').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                                                        });
                                                    }, 3000);
                                                } else {
                                                    $('#indicador').fadeOut('fast', function () {
                                                        $(this).removeClass('cargando-satisfactorio').html("<span class='glyphicon glyphicon-time'></span> Cargando...");
                                                    });
                                                }
                                            });
                                        } else {
                                            return false;
                                        }
                                    });

                                }).on('hidden.bs.modal', function (e) {
                                    e.preventDefault();
                                    $('#modalCrearEstructura').remove();
                                });

y en el archivo JS de la aplicación declarado el mismo:

$("#modalCrearEstructura").find('#colaborador_perfilColaborador, #colaborador_provinciaCuba').select2({
            dropdownParent: $('#modalCrearEstructura')
        });

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.