After searching extensively for a solution to what seems like a common problem, I couldn't find anything that worked for me. So here is my issue:
In short, the Razor code I have (shown below) posts an ajax form to an MVC4 action successfully. However, any attempts to add a callback function to the form (OnSuccess, OnBegin, etc.) result in a runtime error stating that the callback function is not defined. Below is the image of the error message in my Chrome browser after the exception occurs:
This is the code for the form:
@using (Ajax.BeginForm("AskQuestion", null,
new AjaxOptions() {
OnSuccess = "endAskQuestion" },
new { id = "askQuestionForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>@ViewBag.Controller</legend>
<br />
@{ var investigationID = Model.Investigation.InvestigationID; }
@Html.HiddenFor(model => investigationID)
<input type="submit" class="button" value="Submit"/>
<input type="button" id="cancelEdit" class="button" value="Cancel Edit"/>
</fieldset>
}
And here is the script where the endAskQuestion function is defined:
$(document).ready(function () {
//deleted several Jquery and JS functions...
// definition of the callback function
function endAskQuestion() {
alert("adad");
}
})
I also noticed that some posts mentioned the importance of referencing JQuery and Ajax scripts. Here is the head section of the HTML with the references:
<head>
<meta charset="utf-8" />
<title>RTInvestigation</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/css?v=_WuF_JGHabtqdWNcwICWILVG9A391eZyF0GO24jlq9U1" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" />
<script> </script>
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/jquery-1.8.2.js"></script>
<script src="/Scripts/jquery-ui-1.8.18.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</head>
I'm puzzled as to why two different versions of JQuery-UI are being referenced by Razor...I haven't been able to determine the reason.
Why is the callback function not defined??
Thank you for your assistance