Javascript Ajax Callback function not defined error
Question
I tried searching all around since this seems to me a very common (NuBee?) problem, but nothing worked for me...so here it is
To cut right to the chase, my Razor code (shown later) posts an ajax form to a MVC4 action which works fine but any attempt to add a callback function to the form ( OnSuccess , OnBegin etc) fails with a runtime error that the callback function is not defined. This is the image of the error message in the my Chrome browser, right after the exception occurs:
This is the form's code:
@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="שלח היגד"/>
<input type="button" id="cancelEdit" class="button" value="בטל עריכה"/>
</fieldset>
}
And the script inside which the endAskQuestion is defined:
$(document).ready(function () {
//deleted several Jquery and JS functions...
// callback function definition
function endAskQuestion() {
alert("adad");
}
})
Also, I saw some posts that stated the references to JQuery and Ajax scripts are important so here's the html's head section 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 don't know why Razor creates references for two Jquery-UI versions...I couldn't find the reason.
How come the callback function is not defined??
Thanks for helping
2 answers
solution1
1 ACCPTED 2013-10-21 07:26:48
Take endAskQuestion out of the $(document).ready function. Also, use a semicolon at the end of each javascript code line, as that will often throw undefined errors, as well.
$(document).ready(function () {
//deleted several Jquery and JS functions...
}); // added semicolon here...
// callback function definition should be moved outside
function endAskQuestion() {
alert("adad");
}
solution2
0 2013-10-21 07:31:48
The scope of your endAskQuestion is limited to the anonymous function that jQuery calls when the document is ready. As ps2goat says, you need to take it out of the $(document).ready callback. In this way it will be defined globally and will be accesible through closure to the callbakc you're using for AJAX. Read about scoping, closures and anonymou.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.