ASP.NET MVC, Autocomplete in jQGrid does not call controller for data.

Question

Hi,

Autocomplete does not call corresponding action on Controller. In my case here SharedContoller\FindLocation does not get invoked on typing anything in the textbox of autocomplete. Rest all things are working fine.

Declaration of scripts :

<script src="../../Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.autocomplete.js" type="text/javascript"></script>    
<script src="../../Scripts/jquery.jqGrid.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqModal.js" type="text/javascript"></script>
<script src="../../Scripts/js/jqDnR.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.maskedinput-1.2.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/js/grid.locale-en.js" type="text/javascript"></script>

Table declaration :

<table id ="RegionAndCity" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="listPager" class="scroll" style="text-align:center;"></div>   

Finally the jqgrid and autocomplete code :

var PlanId = $("#PlanId").val();
var updateDialog = {
    url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>'
    , closeAfterAdd: true
    , closeAfterEdit: true
    , recreateForm: true
    , modal: false,
    onclickSubmit: function (params) {
        var ajaxData = {};
        var plannerName = $("#PlannerId :selected").text();
        ajaxData = { PlanId: PlanId, PlannerName: plannerName,
                     LocationName: $("#LocationId :selected").text() };
        return ajaxData;
    }
};       

$("#RegionAndCity").jqGrid({
    url: '/BriefAllocation/GetRegionAndCities/?PlanId=' + PlanId,
    datatype: 'json',
    mtype: 'GET',
    prmNames: { PlanId: PlanId },
    colNames: ['RegionsAndCitiesId', 'LocationId', 'LocationName'],
    colModel: [
        { name: 'RegionsAndCitiesId', index: 'RegionsAndCitiesId', width: 100,
          align: 'left', /* key: true,*/editable: true,
          editrules: { edithidden: false }, hidedlg: true, hidden: true },
        { name: 'LocationId', index: 'LocationId', width: 150, align: 'left',
          editable: false, edittype: 'select', editoptions: { value: countries },
          editrules: { required: true }, formoptions: { elmsuffix: ' *'} },
        { name: 'LocationName', index: 'LocationName', width: 300, align: 'left',
          editable: true, edittype: 'text',
          editoptions: { dataInit:
              function (elem) {
                  setTimeout(function () {
                      $(elem).autocomplete('/Shared/FindLocation/', {
                          dataType: "json",
                          multiple: false,
                          formatItem: function (item, index, total, query) {
                              return item.value;
                          },
                          parse: function (data) {
                              return $.map(data, function (item) {
                                  return {
                                      data: item,
                                      value: item.Key,
                                      result: item.value
                                  }
                              });
                          }
                      }).result(function (event, row) {
                          $("#LocationId").val(row.Key);
                      });
                  }, 100);
              }
          }, editrules: { required: true }
        }],
        pager: $('#listPager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: 'RegionsAndCitiesId',
        sortorder: "asc",
        viewrecords: true,
        imgpath: '/scripts/themes/steel/images',
        caption: '<b>Regions And Cities</b>',
        ondblClickRow: function (rowid, iRow, iCol, e) {
            $("#RegionAndCity").editGridRow(rowid, prmGridDialog);
        }
    }).navGrid('#listPager', { edit: true, add: true, del: true, refresh: true },
            updateDialog,
            updateDialog,
            updateDialog);
});

Autocomplete calls SharedController\FindLocation. Code for it is :

 public ActionResult FindLocation(string q, int limit)
    {
        return Content("");
    }

This method does not get invoked. I also tried with :

 public ActionResult FindLocation()
    {
        return Content("");
    }

This also does not get invoked. FindLocation with parameters works fine if autocomplete is used with a html textbox.

Pl help me find the problem. Saw almost all the posts related to this..working on this since 2 days now..

Thanks, Bhoomi.

Answer 1

First of all there are a simple but very important error in your program: the file grid.locale-en.js must be inserted before jquery.jqGrid.js. If you use Developer Version of jqGrid from GitHub then grid.locale-en.js is already loaded inside of jquery.jqGrid.js.

Other small syntax errors are in the updateDialog. In JavaScript you should be carefull with the new lines. In some situations you have to not insert ; at the end of line and line break insert it for you. For example you forget semicolon after

return {
    data: item,
    value: item.Key,
    result: item.value
}

it should be

return {
    data: item,
    value: item.Key,
    result: item.value
};

but it is not so bad. Onother place in not so good. You should rewrite updateDialog like following

var updateDialog = {
    url: '<%= Url.Action("UpdateRegionAndCity", "BriefAllocation") %>',
    closeAfterAdd: true,
    closeAfterEdit: true,
    recreateForm: true,
    modal: false,
    onclickSubmit: function (params) {
        return { PlanId: $("#PlanId").val(),
                 PlannerName: $("#PlannerId :selected").text(),
                 LocationName: $("#LocationId :selected").text() };
    }
};

It is important to place commas at the end of line and place var PlanId = $("#PlanId").val(); inside of onclickSubmit function. In your current code $("#PlanId").val() will be read outside of onclickSubmit, so you will use all time old value from "#PlanId" field.

Moreover which version of jqGrid you use? Attribute class="scroll" is noot needed since some versions of jqGrid. Moreover I recommend you use jQuery UI 1.8.2 together with jqGrid 1.7.2.

The usage some default option like align: 'left' or editable: false is not needed.