2

Trabajo en un proyecto ASp Mvc y utilizo el siguiente script para mostrar y ejecutar la función submit de una ventana modal:

    //$(function () {
    $.ajaxSetup({ cache: false });
    //$('#popUpLink').on("click", function (e) {
    $("a[data-modal]").on("click", function (e) {
        // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
        //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
        e.preventDefault();
        e.stopPropagation();
        $('#myModalContent').load(this.href, function () {
            $('#myModal').modal({
                /*backdrop: 'static',*/
                keyboard: true
            }, 'show');
            bindForm(this);
        });
        return false;
    });
//});


function bindForm(dialog) {
    $('form', dialog).submit(function () {
        //event.preventDefault();
        $.ajax({
            url: this.action,
            type: this.method,
            contentType: this.enctype,
            data: $(this).serialize(),
            success: function (result) {

                if (result.success) {
                    $('#myModal').modal('hide');
                    $('#replacetarget').load(result.url); //  Load data from the server and place the returned HTML into the matched element
                } else {
                    $('#myModalContent').html(result);
                    bindForm(dialog);
                }
            }
        });
        return false;
    });
}

Tengo el siguiente HTML mostrandose como una ventana Modal:

   @model EtapaViewModel
   @{
     Layout = null;
    }

    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Content/js/ctrlLineScripts.js"></script>
    <link href="~/Content/popup/popupstyle.css" rel="stylesheet" />

    <div class="modal-header modal-header-warning">

    <h3 class="modal-title" style="text-align: center;">
       CtrlLine
       <button type="button" class="close panelTitleTxt glyphicon glyphicon-remove landing-icon" data-dismiss="modal" aria-hidden="true"></button>
    </h3>
    </div>

    @using (Html.BeginForm())
    {
    @Html.AntiForgeryToken()
    <div class="modal-body">

       <div class="form-horizontal">

           @Html.ValidationSummary(true, "", new { @class = "text-danger" })

           <div class="form-group">
               <div class="col-sm-10">
                   @Html.LabelFor(model => model.Descripcion, htmlAttributes: new { @class = "control-label col-sm-0  popup-labelfont" })
                   @Html.EditorFor(model => model.Descripcion, new { htmlAttributes = new { @class = "form-control", @autofocus = "autofocus", maxlength = "250", @placeholder = "Descripción de la Etapa" } })
                   @Html.ValidationMessageFor(model => model.Descripcion, "", new { @class = "label label-danger" })
               </div>
           </div>

           <div class="form-group">
               <div class="col-sm-10">
                   <input class="btn btn-success" id="btnSave" type="submit" value="Guardar" />
                   <input aria-hidden="true" class="btn btn-md btn-warning" data-dismiss="modal" id="btncancel" type="button" value="Cancelar" />
               </div>
           </div>

       </div>

   </div>
   }

   <script>
    $('form').submit(function() {

       $('#myModal').on('hidden.bs.modal', function() {
           window.loadEtapas();
       });
   });

   $('.modal').modal({
       keyboard: true,
       show: false
   });
   // Jquery draggable
   $('.modal-dialog').draggable({
       handle: ".modal-header"
   });
    </script>

La idea es que después de ejecutarse el Submit y que el controller no haya regresado ninguna excepción se cierre el Modal y me mande a llamar a una función, en este caso window.loadEtapas(), el problema que ocurre es que por alguna razón la función loadEtapas() se manda a llamar tantas veces como veces utilice el modal, si muestro el modal y presiono el botón Submit una vez entonces loadEtapas() se llama una vez, si posteriormente vuelvo a usar el modal loadEtapas() se llama dos veces, y asi sucesivamente tal parecería que la orden de llamar a la función se fuera sumando.

Esta es la funcion loadEtapas():

    function loadEtapas() {
 if (!$dtExample.hasClass('.block-loading')) {
     $dtExample.prepend(block);
 }

 var params = {
     proyectoId: $('#proyectoId').val()
 }
 $.ajax({
     url: '/etapas/EtapasListPv',
     data: params,
     type: 'get',
     dataType: 'html',
     success: function(result) {
         $('#etapasList').html(result);

         window.displayCuadrillasCollapse();
         $($dtExample).find('#blocking').remove();

     },
     error: function(error) {
         $($dtExample).find('#blocking').remove();
     }
 });

}
5
  • 1
    ami me pasaba algo similar y lo que hice fue deshabilitar el botón y fin de problemas, pero no es una solución que se adapte a tu necesidad lo que puedes hacer es cambiar el type="submit" a type="button" y capturar el clickdel boton y puede que siga haciendo lo mismo no tengo garantía de que funcione correctamente
    – JuankGlezz
    Commented el 24 jun. 2016 a las 16:17
  • Si, eso ya lo intente y si sigue haciendo lo mismo, de echo puse un var counter en el script y cuando presione el button se incremente a 1 entonces para llamar a la función loadEstapas(), pregunto si counter === 1, funciona pero también veo en el navegador que counter se va sumando +1 por cada click, osea como que no se destruye al hacer el hide del modal, otra cosa que hace es que al presionar el botón Cancelar tambien me llama a la loadEtapas()... Commented el 24 jun. 2016 a las 16:25
  • que tal amigo tengo la misma problemática pero a mi no me ejecuta la función que debería cargar podrías echarme una mano. solo que yo en el action resulto regreso un true o un falso, Commented el 8 jun. 2017 a las 14:41
  • ¿Donde tienes escrito el id="myModal" ? Commented el 15 sept. 2017 a las 9:49
  • Tuve algo parecido y lo solucioné haciendo un clone() del modal y sobre este hacia el show y hiee. Al cerrar el modal hacia un detach del clone. En resumen mi modal lo utilice como plantilla. Commented el 10 may. 2021 a las 5:23

1 respuesta 1

0

El problema es que se queda los eventos en el modal se van acumulando.

Prueba a cambar el evento del modal al siguiente código:

$('#myModal').on('hidden.bs.modal', function() {
    window.loadEtapas();
    $(this).data('modal', null); // Destruye el modal
});

Con esto cada vez debería crearse un modal nuevo.

Tu Respuesta

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

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