Javascript Function Not Found ing MVC Generated Code

Question

I have this code below in a an ASP.NET MVC 3 View. For some reason when I run it in chrome, and look at the console it says:

Uncaught ReferenceError: submitAjaxRequest is not defined

<script>
        $(function () {
            function submitAjaxRequest(eventId) {
                var request = $.ajax({
                    url: "/Toolbox/Blog/Delete",
                    type: "POST",
                    data: { id: eventId },
                    dataType: "json"
                });

            request.done(function (data, msg) {
                $('tr[data-id="' + eventId + '"').animate({
                    height:"0px"
                }).remove();
            });

            request.fail(function (data, msg) {
                $('#ajax-error').empty().toggle().append(msg).delay(1500).toggle();
            });
        }
    });
</script>
<table>
    <thead>
    <tr>
        <th>
            Title
        </th>
        <th>
            Content
        </th>
        <th>
            Time Stamp
        </th>
        <th style="width: 105px"></th>
    </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
    <tr data-id="@item.Id">
        <td>
            @Html.DisplayFor(modelItem => item.Title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Content)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.TimeStamp)
        </td>
        <td>
            <a href="@Url.Action("Edit", "Blog", new { id=item.Id })"><img src="@Url.Content("~/Content/edit.png")" alt="Edit" /></a> | 
            <a href="@Url.Action("Details", "Blog", new { id=item.Id })"><img src="@Url.Content("~/Content/detail.png")" alt="Detail" /></a> |
            <img src="@Url.Content("~/Content/delete.png")" onclick="submitAjaxRequest('@item.Id')" width="48" />
        </td>
    </tr>
}
    </tbody>
</table>

Why won't it work?

Answer 1

Your submitAjaxRequest is defined within another function (your document.ready in this case) then it is not available in the global (window) scope, then your onclick="submitAjaxRequest('@item.Id')" doesn't know abut this function.

Try:

var submitAjaxRequest;

$(function () {
            submitAjaxRequest = function(eventId) {
                var request = $.ajax({
                    url: "/Toolbox/Blog/Delete",
                    type: "POST",
                    data: { id: eventId },
                    dataType: "json"
                });

            request.done(function (data, msg) {
                $('tr[data-id="' + eventId + '"').animate({
                    height:"0px"
                }).remove();
            });

            request.fail(function (data, msg) {
                $('#ajax-error').empty().toggle().append(msg).delay(1500).toggle();
            });
        }
    });