Call Jquery grid inside a function

Question

I have a jquery grid. I want to change the data of jquery grid on dropdown change event.

So I need to call the jqgrid inside the change event.

below is my code

$("#ddlCategory").change(function () {
        UserJqGrid();
    GetMapDataOnChange();                 
});

The first function return a jqgrid and the 2nd function will return a map. But only 1st time the jqgrid load.After that on change the dropdown list the data of the grid not updated.

my UserJqGrid() function is

$("#list").jqGrid({
    url: "<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" + cityId,
    datatype: 'json',
    mtype: 'GET',
    colNames: ['Object Id', 'Name', 'Longitute', 'Latitute', 'Country', 'City'],
    colModel: [{
        name: "id",
        index: "id",
        key: true,
        width: 20,
        editable: true,
        key: true,
        editoptions: {
            readonly: true,
            size: 10
        }
    }, {
        name: "objName",
        index: "objName",
        width: 100,
        editable: true
    }, {
        name: "longi",
        index: "longi",
        width: 30,
        align: "left",
        editable: true
    }, {
        name: "lati",
        index: "lati",
        width: 30,
        align: "left",
        editable: true
    }, {
        name: "countryName",
        index: "countryName",
        width: 50,
        align: "left",
        editable: true
    }, {
        name: "cityName",
        index: "cityName",
        width: 50,
        align: "left",
        sortable: false,
        editable: true
    }, ],
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
    width: 900,
    gridview: true,
    shrinkToFit: true,
    //rownumbers: true,
    height: 200,
    caption: 'Shipping Method',
    editurl: '../php/EditShipping.php'

});
jQuery("#list").jqGrid('navGrid', '#pager', {
    edit: true,
    add: true,
    del: false,
    excel: false,
    search: false
});

score 0 · Answer 1 · answered Jul 04 '13 at 18:33

0

I solved my problem. I call this reload event of grid.As the grid is already created so we don't need to call the whole function again.Just need to reload the grid with new data.

jQuery("#list")
.jqGrid('setGridParam',
{ 
  url:"<?php echo base_url() ; ?>userController/GetUserGirdData?catIds=" + str + "&cityId=" +cityId,
  datatype: 'json',
  mtype: 'GET'
}).trigger("reloadGrid");

answered Jul 04 '13 at 18:33

amit ghosh

276
1
4
15

It's better to follow [the answer](http://stackoverflow.com/a/2928819/315935). I suppose that `str` and `cityId` parts will be changed inside of `$("#ddlCategory").change`. To be exactly you have to use `encodeURIComponent` to build the values. I suppose you read just ids of selected options of some ` – Oleg Jul 04 '13 at 18:38

Call Jquery grid inside a function

1 Answers1