7 jun
2017

Multiples llamadas a función ajax después de cerrar bootstrap popup

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();
     }
 });

}

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation