A jQuery script reference is required in order to enable Ajax support in the \“WebGrid\” helper

I've looked at the other solutions, but I don't think they apply to my case.

The problem is that everything works well and goes through the code. And when I debug - all the values and everything returns correctly. But when I look at the network, it's returning me following exception: "A jQuery script reference is required in order to enable Ajax support in the \"WebGrid\" helper.".

The idea is that I'm trying to update my partial view of which the webGrid is part of, once a selection has been made from the drop-down menu.

So the controller:

    [HttpGet]
    public ActionResult FilterGrid(string selVal)
    {
        ItemType itemType = db.ItemTypes.FirstOrDefault(type => type.Name == selVal);

        IEnumerable<Item> items = db.Items.ToList().Where(types => types.ItemTypeId.ToString() == itemType.Id.ToString());

        return PartialView("_Grid", items.ToList());
    }

I have the grid as a partial:

<div id="grid">
    @Html.Partial("_Grid", items)
</div>

And the grid itself:

@using ManagerApp.Models
@model IEnumerable<Item>

@{ 
     var grid = new WebGrid(Model.ToList(), rowsPerPage: 5, ajaxUpdateContainerId:"grid");
    }
    @grid.GetHtml(columns: grid.Columns(
            grid.Column(columnName: "Name", header: "Name", format: (item) => @Ajax.ActionLink((string)item.Name, "ItemDetails", new { id = item.Id }, new AjaxOptions() { HttpMethod = "POST", UpdateTargetId="viewData", InsertionMode = InsertionMode.Replace }), style: "gridStyle"),
            grid.Column(columnName: "Price", header: "Price"),
            grid.Column("", format: (item) => @Ajax.ActionLink("Edit", "EditItem", new { id = item.Id }, new AjaxOptions() { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "viewData" })),
            grid.Column("", format: @<text>@Html.ActionLink("Delete", "DeleteItem", "ItemType", new { id = item.Id }, null)</text>)
 ))

And the ajax script:

/// <reference path="jquery-1.5.1.js" />

$(function () {
    $("#GridItemTypes").change(function (event) {
        $.ajax({
            type: 'GET',
            url: "ItemType/FilterGrid",
            data: { selVal: $(this).find("option:selected").html() }
        });


    }
    );
});

So it does go through all the filtering on select, and goes into the partial view which then seems to have the correct values, but it doesn't render.

What am I missing here?

I have my references at the top of the page, as placing them at the bottom have only broken something else on my page, and this one was still not working.

It also doesn't matter whether I'm trying to do Post or Get.

Answers


In what order are you adding your javascript/jquery references ?

make sure that jquery reference is the top most.

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/other1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/other2.js")" type="text/javascript"></script>

Need Your Help

How to htaccess requests from /folder/ to use /folder/ as root document

.htaccess subdirectory document-root

I'm currently writing a cms system in a subdirectory of the main html root and was wondering is possible using htaccess to redirect all requests that come from say /cms/ to use /cms/ as it's root

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.