MVC Ajax.BeginForm OnSuccess function not defined

Question

I'm trying to get my Ajax.BeginForm to run a function OnSuccess but I keep getting in firebug the error message:

UpdateProjectDiv is not defined
 return Function.constructor.apply(null, argNames); 

Here's what the form looks like:

<script type="text/javascript">
    $(document).ready(function () {

        function UpdateProjectDiv() {
            var projid = $("#ddlProjectsManage").val();

            $.post("/Manage/ProjectEmployeeList/", { projectid: projid }, function (data) {
                populateDiv($("#divProjectsToFill"), data);
            });
        }

        function populateDiv(div, data) {
            div.html('');
            div.append(data);
        }

    });
</script>

@using (Ajax.BeginForm("MoveToProject", new AjaxOptions { UpdateTargetId = "divAllEmployeesToFill", OnSuccess = "UpdateProjectDiv" }))
{
    [insert non-relevant code here] 

    <input id="btnMoveEmpsToProject" type="submit" value=">>"  />
    @Html.Hidden("SelectedProjectID","9999999999999")
}

And My controller action:

[HttpPost]
public ActionResult MoveToProject(UnassignedEmployeeBindingModel model, int selectedprojectId)
{
    var tempteam = _db.SpecTeams.SingleOrDefault(s => s.Name == "N/A" && s.ProjectId == selectedprojectId);

    try
    {
        foreach (var employee in model.UnassignedEmployees)
        {
            var employeeObj = _db.Employees.SingleOrDefault(e => e.Id == employee.Employee.Id);

            if (employee.IsSelected)
            {
                employeeObj.SpecTeamId = tempteam.Id;
                _db.SaveChanges();
            }
        }

        return RedirectToAction("UnassignedEmployeeList");
    }
    catch (Exception)
    {
        return RedirectToAction("Index");
    }
}

Without the OnSucess the code it works fine, except it doesn't refresh the div in another partial (#divProjectsToFill) automatically.

Additionally it seems to be looking for the function UpdateProjectDiv in the jquery.unobtrusive-ajax.js file rather than on the page itself. I suppose I might be able to add my function in that file (although I haven't tried yet) but that does not sound like a proper solution.

Thanks!

Answer 1

Break your function definitions outside of the $(document).ready(...) event handler:

<script type="text/javascript">
    function UpdateProjectDiv() {
        var projid = $("#ddlProjectsManage").val();

        $.post("/Manage/ProjectEmployeeList/", { projectid: projid }, function (data) {
            populateDiv($("#divProjectsToFill"), data);
        });
    }

    function populateDiv(div, data) {
        div.html('');
        div.append(data);
    }

    $(document).ready(function () { /*... */});
</script>