dataUrl in edit option does not work in JqGrid when using to refresh the select box

Question

I am new to jqGrid. I am trying to use dataUrl in editoptions to make the select box option values refreshed for every row edit(before showing the edit form).

But the i dont see refresh happening and i done see any http request made in the firebug while editing a row in jqGrid.

i am calling a php file "loadPoleManagers.php" in dataUrl in the column called Pole_manager and in the php file i return select html tag with options, the pure html tag.

Can you please anyone advice me if i am missing something?

Below is my jqGrid code .

$('#groups_grid').jqGrid({
    caption: 'Groups',
    hidegrid:false,
    height:'100%',
    width:1024,
    imgpath: 'style/jquery.plugins/jqgrid/steel/images',
    loadui:'disable',
    forceFit:true,
    pager: jQuery('#pagerGroups'),
    viewrecords:true,
    url:'data/xml/grid/groups.php',
    datatype: "xml",
    mtype:'POST',
    ajaxSelectOptions: { cache: false },
    colNames:['ID','Name', 'Complete day compulsory', 'Pole manager',
        'Support Leader', 'Itrack group name'],
    colModel:[
        {name:'id_group',index:'id_group', width:40, align:"center"},
        {name:'name',index:'name', width:70, resizable:true, editable:true,
            editoptions: {size:'20', maxlength:'45'}},
        {name:'complete_day_compulsory',index:'complete_day_compulsory',
            width:110, align:"center", resizable:true, sortable:true,
            editable:true, edittype:'select', editoptions: {value:"0:No;1:Yes"}},
        {name:'pole_manager',index:'pole_manager->last_name', width:100,
            resizable:true, sortable:true, editable:true,
            edittype:'select',editoptions:{dataUrl:'loadPoleManagers.php'}},
        {name:'support_leader',index:'support_leader->last_name', width:100,
            resizable:true, sortable:true, editable:true, edittype:'select',
            editoptions: {value:support_leaders}},
        {name:'itrack_group_name',index:'itrack_group_name', width:100,
            resizable:true, editable:true, edittype:'text'}
    ],
    rowNum:15,
    rowList:[5, 10, 15, 25],
    imgpath: 'style/jquery.plugins/jqgrid/steel/images',
    sortname: 'id_group',
    multiselect: false,
    onSelectRow: rowSelectedHandler,
    ondblClickRow: function(id){
        if(id){
            jQuery('#groups_grid').restoreRow(lastEditedGroup);
            jQuery('#groups_grid').editRow(id,true);
            lastEditedGroup=id;
        }
    },
    loadComplete: function(){
        lastEditedGroup = null;
        lastSelectedGroup = null;
    },
    editurl: 'data/forms_handle/edit_group.php'
    }).navGrid("#pagerGroups",
        {refresh: true, edit: true, add: true, del: true, search: true, view: false},
        {height:220, width:690, closeAfterEdit:true, recreateForm:true},
        {height:220, width:690, closeAfterAdd:true,recreateForm:true},
        {height:140, width:380},
        {height:80, width:450, closeAfterSearch:true,closeOnEscape:true,
            multipleSearch:true}
    );

Thanks.

Answer 1

I used thebeforeShowForm function to resolve this.

Below is the complete code that refresh the select box option list whenever a row is selected and clicked for edit.

$("#groups_grid").jqGrid({
    caption: "Groups",
    hidegrid:false,
    height:'100%',
    width:1024,
    imgpath: 'style/jquery.plugins/jqgrid/steel/images',
    loadui:"disable",
    forceFit:true,
    pager: jQuery('#pagerGroups'),
    viewrecords:true,
    url:'data/xml/grid/groups.php',
    datatype: "xml",
    mtype:'POST',
    ajaxSelectOptions: { cache: false },
    colNames:['ID','Name', 'Complete day compulsory', 'Pole manager', 'Support Leader', 'Itrack group name'],
    colModel:[                                          
        {name:'id_group',index:'id_group', width:40, align:"center"},
        {name:'name',index:'name', width:70, resizable:true, editable:true, editoptions: {size:'20', maxlength:'45'}},
        {name:'complete_day_compulsory',index:'complete_day_compulsory', width:110, align:"center", resizable:true, sortable:true, editable:true, edittype:'select', editoptions: {value:"0:No;1:Yes"}},
        {name:'pole_manager',index:'pole_manager->last_name', width:100,  resizable:true, sortable:true, editable:true, edittype:'select',editoptions: {value:pole_managers}},
        {name:'support_leader',index:'support_leader->last_name', width:100,  resizable:true, sortable:true, editable:true, edittype:'select', editoptions: {value:support_leaders}},
        {name:'itrack_group_name',index:'itrack_group_name', width:100,  resizable:true, editable:true, edittype:'text'}
    ],
    rowNum:15,
    rowList:[5, 10, 15, 25],
    imgpath: 'style/jquery.plugins/jqgrid/steel/images',
    sortname: 'id_group',
    multiselect: false,
    onSelectRow: rowSelectedHandler,
    ondblClickRow: function(id){ 
        if(id){
            jQuery('#groups_grid').restoreRow(lastEditedGroup);
            jQuery('#groups_grid').editRow(id, true);
            lastEditedGroup = id;
        }
    },
    loadComplete: function(){
        lastEditedGroup = null;
        lastSelectedGroup = null;
    },


    editurl: 'data/forms_handle/edit_group.php'
}).navGrid("#pagerGroups", 
    {
        refresh: true, edit: true, add: true, del: true, search: true, view: false},
    {
        height:220, 
        width:690, 
        closeAfterEdit:true, 
        recreateForm:true,
        beforeShowForm:function(formID) {
            $.post("data/xml/loadPoleManagers.php?group="+lastSelectedGroup, {},
                function(response){
                    //alert(response);
                    jQuery('#pole_manager',formID).empty().append(response);
                },
                 "text"
            );
        }
    },
    {height:220, width:690, closeAfterAdd:true,recreateForm:true},
    {height:140, width:380},
    {height:80, width:450, closeAfterSearch:true,closeOnEscape:true, multipleSearch:true}
);

And in my data/xml/loadPoleManagers.php file I return just html option tag

"<"option>one"</"option">"
"<"option">"Two"</"option">"