jQuery unrecognized Expression error in jqGrid dataUrl method for edittype='select'

Question

This is in continuation of this thread. I'm using the free-jqGrid 4.9.0 and have inline editing.

 { name: 'ContactName',  editable: true, width: 100, sortable: false, frozen: true, formatter: 'select',  edittype: 'select',
                    editoptions: {
                        dataUrl: '/InvestorList/GetContactList',
                        postData: function (rowid, value, cmName) {

                            return { projectId: rowid };
                        }
                    }

In my ASP .NET MVC controller, I have the following method:

public JsonResult GetContactList(string projectId)
    {
        var contacts = new Dictionary<string, string>();//context.GetContactList(projectId);
        contacts.Add("123","IAM1");
        contacts.Add("1234", "IAM2");
        contacts.Add("12345", "IAM3");
        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

Using IE developer tools, this is the response:

{"123":"IAM1","1234":"IAM2","12345":"IAM3"}

But I get the following error,

Unhandled exception at line 2, column 12461 in http://localhost:51176/Scripts/jquery-2.1.3.min.js 0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: {"123":"IAM1","1234":"IAM2","12345":"IAM3"}

I'm wondering what kind of format does dataUrl expect because I use the exact same format for other columns e.g. editoptions: { value: TeaserStatusList } In this case TeaserStatusList has the same format as {"123":"IAM1","1234":"IAM2","12345":"IAM3"}

Thanks

Update:

{ name: 'ContactId', editable: true, width: 100, sortable: false, edittype: 'select', editoptions: {  dataUrl: '/InvestorList/GetContactList',
                        postData: function (rowid, value, cmName) {                            
                            var accid = $(gridId).jqGrid("getCell", rowid, "AccountId");
                            return { accountId: accid };
                        },
                        buildSelect: function (data) {
                            var s = "<select>";
                            data = JSON.parse(data);
                            $.each(data, function (k, v) {
                                s += '<option value="' + k + '">' + v + '</option>';
                            });
                            return s + "</select>";
                        }
                    }

Answer 1

jqGrid expect that dataUrl returns HTML fragment with <select> statement. Thus you should add buildSelect property in editoptions which converts the server response to the string with <select> statement. The corresponding code could be something like below

buildSelect: function (data) {
     var s = "<select>", i, l, val;
     if (data != null) {
         for (val in data) {
             if (data.hasOwnProperty(val)) {
                 s += "<option value='" + val + "'>" + data[val] + "</option>";
             }
         }
     }
     return s + "</select>";
 }

I didn't tested the code, but it seems to me it corresponds the format of data returned from GetContactList action.

I would recommend you to add the line HttpContext.Current.Response.Cache.SetMaxAge (new TimeSpan(0)); at the begining of the action GetContactList to be sure that you will have no problem with caching and the action GetContactList will be called every time.