JQGrid editoptions dataurl not using ajax get?

Question

I have a data grid using editoptions:{dataUrl:'getMetadata?type=' + myType+ '&column=colOne'}. I also have bound a function to the ajaxComplete event in order to do a custom header check after requests are made. This is working fine on everything I've seen with JQGrids request except the dataUrl request. Ajax complete does not fire after the get request is performed. ajaxStart and ajaxStop are indeed getting fired appropriately. Complete/Error/Success are not.

According to the jqgrid documentation for dataUrl it should be using an ajax call in order to grab the data.

'The data is obtained via an AJAX call and should be a valid HTML select element with the desired options ...'

Is there something else I'm missing here? Binding code below.

$('body').bind('ajaxComplete',function(event,request,settings){
    if (request.getResponseHeader('REQUIRES_AUTH') === '1'){
       location.reload();
    };
});
//Other binds added to see what is getting fired
$('body').bind('ajaxError',function(event,request,settings){
    if (request.getResponseHeader('REQUIRES_AUTH') === '1'){
       location.reload();
    };
});
$('body').bind('ajaxSuccess',function(event,request,settings){
    if (request.getResponseHeader('REQUIRES_AUTH') === '1'){
       location.reload();
    };
});
$('body').bind('ajaxStart',function(){
    var b = "ABC";
    var c = "DEF";
});
$('body').bind('ajaxStop',function(event,request,settings){
    var b = "ABC";
    var c = "DEF";
});

Edit: Forgot to add that the request is coming back with a 200 status.

-----------------------------Ajax Select Options issue here------------------------

The following code when put anywhere (currently in document.ready) is causing all select boxes to not display in searches.

$.extend($.jgrid.defaults, {
            ajaxSelectOptions: {    
                complete: function (jqXHR) {
                    if (jqXHR.getResponseHeader('REQUIRES_AUTH') === '1') 
                    {
                        location.reload();
                    } 
                    return;
                }
        }});

ColModel and Names

    gridForm.colNames = ['ID','Field1','Field2','Field3','Field4','Field5','Last User Id','Modified Date' ];
gridForm.colModel = [
                      {name:'id', editable: false, edittype:'text',search:true, stype:'text'},        
                      {name:'Field1', editable: checkedOutByUser, edittype:'text', search:true,editrules:{required:true}, stype:'text'},
                      {name:'Field2', editable: checkedOutByUser, edittype:'select', editoptions:{dataUrl:dataUrl + "&search=false"}, search:true,editrules:{required:true}, searchoptions:{dataUrl:dataUrl + "&search=true"}, stype:'select'},
                      {name:'Field3',  editable: checkedOutByUser, edittype:'select', editoptions:{dataUrl:dataUrl + "&search=false"}, editrules:{required:true},search:true, searchoptions:{dataUrl:dataUrl + "&search=true"}, stype:'select'},
                      {name:'Field4',  editable: checkedOutByUser, edittype:'select', editoptions:{dataUrl:dataUrl + "&search=false"}, editrules:{required:true}, search:true, searchoptions:{dataUrl:dataUrl + "&search=true"}, stype:'select'},
                      {name:'Field5', editable: false, edittype:'text', search:true, stype:'text'},
                      {name:'userId', editable: false, edittype:'text', search:true, stype:'text'},
                      {name:'modifiedDate', editable: false, search:true, stype:'text', searchoptions:{dataInit:function(el){defaultCalendar.create(el, "componentGrid");}}}                             
                      ];

Grid definition, using some ternary based so we can re-use the jqgrid call for similar grids

    $("#myGrid").jqGrid(
        {
            caption:gridForm.caption,
            overflow:'hidden',
            url:gridForm.url?gridForm.url:url,
            height: gridForm.height?gridForm.height:'auto',
            datatype: "json",
            colNames:gridForm.colNames,
            colModel:gridForm.colModel,
            recordtext: 'Record(s) {0} - {1} of {2}', 
            rowNum: 20, 
            sortname: gridForm.sortindex?gridForm.sortindex:"id",
            sortorder: gridForm.sortorder?gridForm.sortorder:"desc",
            cellEdit: false,
            cellurl : 'updateRow', 
            editurl:'addRow',
            cellsubmit : 'remote',
            toolbarfilter: true,
            onCellSelect:gridForm.onCellSelect?gridForm.onCellSelect:null,
            pager: jQuery('#pager'),
            viewrecords: gridForm.viewrecords?gridForm.viewrecords:true,
            gridview: gridForm.gridview?gridForm.gridview:true,
            shrinkToFit: true,
            multiselect: gridForm.multiselect?gridForm.multiselect:true});
jQuery("#myGrid").jqGrid('filterToolbar');

and finally, the HTML being returned from the data URL

<select><option value=''</option><option value='Dummy Entry'>Dummy Entry</option><option value='Next Entry'>Next Entry</option><option value='ThirdEntry'>ThirdEntry</option><option value='FourthEntry'>FourthEntry</option></select>

Sorry about the wall of text, but I tried to add everything that might seems useful. Note that this has worked perfectly fine (select boxes in search populating) across numerous (10+) jqgrids that we have until enabling the ajaxSelectOptions default.

Answer 1

I would recommend you to use ajaxSelectOptions option of jqGrid to customize the Ajax request which uses jqGrid to get data from dataUrl. I hope that the parameter ajaxSelectOptions could look in your case like

ajaxSelectOptions: {
    complete: function (jqXHR) {
        if (jqXHR.getResponseHeader('REQUIRES_AUTH') === '1') {
            location.reload();
        }
    }
}