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

Question

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.

http://stackoverflow.com/questions/10987855/cant-get-past-a-jquery-script-reference-is-required-in-order-to-enable-ajax-su - Check if this link helps you.. — ssilas777, Sep 10 '12 at 06:05

score 0 · Accepted Answer · answered Sep 10 '12 at 11:03

0

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>

answered Sep 10 '12 at 11:03

Yasser Shaikh

46,934
46
204
281

Yes, the references are specified in this order in my _Layout.cshtml: – Widunder Sep 10 '12 at 21:07
I truly see no reason of it not to work. May be it goes through the partial view, but there is nothing that's telling it to actually render? I would have thought that returning the partial view would do that? May be somehow I could specify something similar to UpdateTargetId within the ajax script? Though the JQuery web-site doesn't give any specific examples on that. – Widunder Sep 10 '12 at 21:10

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

1 Answers1