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?

Move submitAjaxRequest to outside of $(function () {, otherwise it's not globally accessible — Ian
– Ian, Commented Jul 15, 2013 at 13:24
Thanks, why isn't it globally accessable within the $(function (){}) — Callum Linington
– Callum Linington, Commented Jul 15, 2013 at 13:24
Did you include jquery? Move the Script to the bottom of the page as well! — Fals
– Fals, Commented Jul 15, 2013 at 13:25
Because you declared it locally inside of the $(function () { — Ian
– Ian, Commented Jul 15, 2013 at 13:25
And even if you fix that part, it won't work because you've declared request locally in the submitAjaxRequest function, so it won't be accessible to use done and fail — Ian
– Ian, Commented Jul 15, 2013 at 13:26

haim770 · Accepted Answer · 2013-07-15 13:38:07Z

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();
            });
        }
    });

Collectives™ on Stack Overflow

Javascript Function Not Found ing MVC Generated Code

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related