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();
}
});
}
type="submit"
atype="button"
y capturar elclick
del boton y puede que siga haciendo lo mismo no tengo garantía de que funcione correctamente