jqGrid MVC Error: "Uncaught ReferenceError: AutoComplete_acid is not defined"

Question

I am fairly new to both MVC and JQGrid. I am having an issue with getting AutoComplete or DatePicker to work with either editing or searching.

I'm assuming (hoping) that one solution will fix both issues since I am getting a similar error for both, so for the time being I've stripped it down to just AutoComlete to simplify things.

I've been following the example at http://www.trirand.net/aspnetmvc/grid/performancelinqsearch to get AutoComplete to work in the search toolbar above the columns.

It seems that no matter what I try, AutoComplete doesn't work and I get this error in Chrome's dev console: "Uncaught ReferenceError: AutoComplete_acid is not define".

Here is my view. I've disabled the master layout in case that was causing any conflicts. I have tried using the version of jQuery that came with the jqGrid download instead of the latest. I'm not getting the alert about AutoComplete missing or a Failed to load resource that happens when I exclude the AutoComplete script.

@model MRA_Survey_Manager.Models.ESLogModel
@using Trirand.Web.Mvc

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>MRA Survey Manager</title>      
    <link rel="stylesheet" type="text/css" href="~/Content/themes/base/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGrid/ui.jqgrid.css" />
    <script type="text/javascript" src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jqGrid/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jqGrid/jquery.jqAutoComplete.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jqGrid/CustomValidators.js"></script>
</head>
<body>
    <div style="Width:100%">
        @Html.Trirand().JQGrid(Model.ESLogGrid, "ESLogGrid")

        @{
            Html.Trirand().JQAutoComplete(
            new JQAutoComplete
            {
                DisplayMode = AutoCompleteDisplayMode.ControlEditor,
                DataField = "Carrier",
                DataUrl = Url.Action("AutoCompleteCarrier", "ESLogGrid")
            }, "AutoComplete");
        }
    </div>
</body>
</html>

And in my controller I have:

public JsonResult AutoCompleteCarrier(string term)
{
    JQAutoComplete autoComp = new JQAutoComplete();

    autoComp.DataField = "Carrier";
    autoComp.AutoCompleteMode = AutoCompleteMode.BeginsWith;
    autoComp.DataSource = from survey in db.MRA_SurveyLog
                          select survey;

    return autoComp.DataBind();
}

And within my grid setup:

JQGridColumn column = logGrid.Columns.Find(c => c.DataField == "Carrier");
column.SearchType = SearchType.AutoComplete;
column.Searchable = true;
column.DataType = typeof(string);
column.SearchControlID = "AutoComplete";
column.SearchToolBarOperation = SearchOperation.BeginsWith;

I have checked the three things listed at http://www.trirand.net/forum/default.aspx?g=posts&t=2902

I have been struggling with this for quite a while. Any help would be greatly appreciated.

score 0 · Accepted Answer · edited May 23 '17 at 12:14

I finally figured it out. It turned out to be an issue with the Razor syntax in the view. For some reason defining the AutoComplete object in a multi-statement block caused that error.

Changing it to a single-statement fixed the issue.

 @Html.Trirand().JQAutoComplete(new JQAutoComplete{DisplayMode = AutoCompleteDisplayMode.ControlEditor, DataField = "Carrier", DataUrl = Url.Action("AutoCompleteCarrier", "ESLogGrid")}, "AutoComplete")

Edit: After resolving another recent issue I've had with Razor syntax I wanted to come back and update this solution. The issue was with my understanding of the syntax and not jqGrid itself. When you have curly braces within a multi-statement block you apparently have to wrap that section in text tags. So the following should also work:

@{ 
    <text>    
    @Html.Trirand().JQAutoComplete(
    new JQAutoComplete
    {
        DisplayMode = AutoCompleteDisplayMode.ControlEditor,
        DataField = "Carrier", 
        DataUrl = Url.Action("AutoCompleteCarrier", "ESLogGrid")
    }, "AutoComplete")
    </text>
 }

More Information at: https://stackoverflow.com/a/6099659/1451531

jqGrid MVC Error: "Uncaught ReferenceError: AutoComplete_acid is not defined"

1 Answers1