0
Let’s go to the stage: A view, which contains a form, is loaded via Ajax (load) into a modal (bootstrap) and then this modal is displayed. The form is built by the @Ajax.Beginform helper where is the reference to an "Onsuccessaddentity" function to handle the Submit result.
The problem: Everything works except the call of the "Onsuccessaddentity" function where it displays the message "Uncaught Referenceerror: Onsuccessaddentity not defined".
What has been verified: If the definition of this function is within the view that is loaded via ajax works, but I don’t want to keep injecting script into html, because I know it’s not good practice. When the definition is in the load calling view it’s like the function is outside the scope, that’s the part I’m not getting.
Follow the example codes:
Controller
using System;
using System.Web.Mvc;
using App.ViewModels;
namespace App.Controllers
{
public class EntityManagerController : Controller
{
//GET: /entitymanager
public ActionResult Index()
{
return View();
}
//GET /entitymanager/listentities
public ActionResult ListEntities()
{
var entities = DBContext.Entity.ToList();
return Json(new { data = entities }, JsonRequestBehavior.AllowGet);
}
//GET /entitymanager/addentity
public ActionResult AddEntity()
{
return View();
}
//POST /entitymanager/addentity
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddEntity(EntityViewModel pEntityViewModel)
{
if (ModelState.IsValid)
{
DBContext.Entity.Add(pEntityViewModel);
return Json(new { Ok = true });
}
ModelState.AddModelError(String.Empty, "Existe(m) erro(s) no preenchimento do formulário");
return View(pEntityViewModel);
}
}
}
View calling the modal
<!-- MAIN CONTENT -->
<div id="content">
<!-- row -->
<div class="row">
<div class="col-xs-3 col-sm-7 col-md-7 col-lg-7 text-right">
<button class="btn btn-success" id="btnAddEntity">
<i class="fa fa-plus"></i> <span class="hidden-mobile">Add Entity</span>
</button>
</div>
</div>
<div class="row">
<table id="dt_basic" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Entity</th>
</tr>
</thead>
<tbody>
/@ Mostra conteudo via AJAX com Datatable @/
</tbody>
</table>
</div>
</div>
//Espaço para abertura do Modal
<div class="modal fade" id="mdlEntityManager" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
</div>
<!-- END MAIN CONTENT -->
@section Scripts {
<script type="text/javascript">
$(document).ready(function() {
//Com o click do botão "Add Entity", carrega o conteudo da view AddEntity dentro do Modal e mostra o modal.
$("#btnAddEntity").click(function() {
$("#mdlEntityManager").load("@Url.Action("AddEntity", "EntityManager")", function() {
$("#mdlEntityManager").modal("show");
});
});
//Executa o submit do formulario.
$("#mdlEntityManager").on("click", "#btnSalveAddEntity", function() {
$("#frmAddEntity").submit();
});
//Funcão do onSuccess do "Ajax.BegimForm
var onSuccessAddEntity = function(result) {
if (result.Ok) {
$("#mdlEntityManager").modal("hide");
window.location.href = "@Url.Action("Index", "EntityManager")";
}
}
});
</script>
}
View loaded inside the modal
@model App.ViewModels.EntityViewModel
@{
Layout = null;
}
<!-- Modal -->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">Add Entity</h4>
</div>
<div class="modal-body">
@Html.ValidationSummary(true, "", new { @class = "alert alert-danger" })
@using (Ajax.BeginForm("AddEntity", "EntityManager",
new AjaxOptions
{
OnSuccess = "onSuccessAddEntity",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "mdlEntityManager",
HttpMethod = "POST",
}, new {id = "frmAddEntity"}))
{
@Html.AntiForgeryToken()
<div class="row">
<div class="col-md-12">
<div class="form-horizontal">
<div class="form-group">
@Html.DisplayNameFor(model => model.Description, htmlAttributes: new {@class = "control-label col-md-3"})
<div class="col-md-9">
@Html.EditorFor(model => model.Description, new {htmlAttributes = new {@class = "form-control", placeholder = "Entity description"}})
</div>
</div>
</div>
</div>
</div>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" id="btnSalveAddEntity">
Salve
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
<!-- /.modal -->
Wouldn’t it be because onSuccessAddEntity is in another view and not in the view that makes the function call?
– JcSaint
After the load a view is integrated into the index view. Where the function was already defined. It seems some Javascript definition scope problem.
– emersoncpaz