jQuery Grid Plugin - jqGrid

OlegK said:

I suppose, that the problem is not the JSON data which you posted, but how the data will be interpreted. Either because of wrong response HTTP headers of the server (Content-Type for example) or because of wrong jqGrid parameters (missing datatype:'json' parameter) the JSON data from the server will be interpret as wrong XML data.

Best regards
Oleg 

Thank You,

I m using

url:'accessReport<%=url%>',
                        datatype: 'json',
                        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
                        mtype: 'POST',

but getting same error.

OlegK said:

Hello,

to be able to help you one need not have the JSON data only, but the definition of the jqGrid which you use. Then one could try to reproduce your problem. It can be also helpful if you catch the full server response inclusive HTTP headers and post it also. You can use Fiddler of Firebug to catch the server response. The most important part of the HTTP header are "Content-Type" (see my previous answer).

Best regards
Oleg 

hello

I found

content-type:application/x-www-form-urlencoded in some files as

jquery.min.js, jquery-1.4.2.min.js

when i change this to application/json searching is also not working and dtil it shows error.

OlegK said:

You should not search for the "Content-Type" in any JavaScript file. You should be sure that the server use "Content-Type: application/json" in the HTTP header if it post the JSON data back (see http://www.ietf.org/rfc/rfc4627.txt Content-Length

63

Cookie

JSESSIONID=5A6913247A4101183639D7BE72236799

OlegK said:

Are you posted the request headers or do the headers of the server response?

Could you post the definition of the jqGrid which should be filled with the JSON data?

Regards
Oleg 

here is my grid

<script type="text/javascript">
             function isValidPhone(value, name) {
                    console.log('isValidPhone');
                    var errorMessage = name + ': Invalid Format';
                    var success = value.length === 10;
                    return [success, success ? '' : errorMessage];
                }            
                jQuery(document).ready(function(){
                    var lastsel2;
                    jQuery("#list").jqGrid({                                                
                        url:'DepartmentController',
                        editurl:'DepartmentController',
                        datatype: 'json',
                        mtype: 'POST',
                        colNames:['Department Name','Description','Is Active','Action'],
                        colModel :[
                            {name:'name', index:'name',align:'left', width:90,editable: true,editoptions:{size:"20",maxlength:"30"},editrules: { required:true,custom:true,custom_func:isNameValid },formoptions:{ rowpos:1, label: "Department Name :"}},                            
                            {name:'description', index:'description', width:90,editable: true,editoptions:{size:"20",maxlength:"30"},editrules: { required: true },formoptions:{ colpos:1,rowpos:2, label: "Description :"}},
                            {name:'isActive', index:'isActive', width:90,editable: true,hidden:true,edittype:'checkbox',editoptions:{size:"20",maxlength:"30",value:"true:false"},editrules: { required: true,edithidden:true },formoptions:{ colpos:1,rowpos:3, label: "Is Active :"}},
                            {name:'act',index:'act', width:115, align:"center", editable:false, search:false} ],
                        pager: jQuery('#pager'), rowNum:10, width:922, height:240, rowList:[5,10,15], sortname: 'id',rownumbers: true,
                        sortorder: "desc", viewrecords: true, emptyrecords: 'No data Found!', imgpath: 'themes/basic/images',
                        multiselect: true, multiboxonly: true,
                        gridModel:true,                        
                        gridComplete: function(){

                        var ids = jQuery("#list").getDataIDs();
                            for(var i=0;i < ids.length;i++){
                                var cl = ids[i];                                
                                be = ' <a title="Edit this row" href="javascript:void(0);" onclick="jQuery(\'#list\').editRow('+cl+'); jQuery(this).parent().hide(); jQuery(this).parent().next().show(); ">Edit</a>';
                                de = ' | <a title="Delete this row" href="javascript:void(0);" onclick="jQuery(\'#list\').delGridRow('+cl+'); ">Delete</a>';
                                se = ' <a title="Save this row" href="javascript:void(0);" onclick="jQuery(\'#list\').saveRow('+cl+'); jQuery(this).parent().hide(); jQuery(this).parent().prev().show();">Save</a>';
                                ce = ' | <a title="Restore this row" href="javascript:void(0);" onclick="jQuery(\'#list\').restoreRow('+cl+'); jQuery(this).parent().hide(); jQuery(this).parent().prev().show();">Cancel</a>';
                                jQuery('#list').jqGrid('setRowData',ids[i],{act:'<span id="edit_row_'+cl+'">'+be+de+'</span>'+'<span style=display:none id="save_row_'+cl+'">'+se+ce+'</span>'});
                                //jQuery('#list').setRowData(ids[i],{act:be+de});    //Save and Cancel buttons inserted via jqGrid setRowData function
                            }
                        },
                        ondblClickRow: function(id){
                            if(id && id!==lastsel2){
                                jQuery('#list').restoreRow(lastsel2);
                                jQuery('#list').editRow(id,true);
                                lastsel2=id;
                                be = ' <a title="Edit this row" href="javascript:void(0);" onclick="jQuery(\'#list\').editRow('+id+',true); jQuery(this).parent().hide(); jQuery(this).parent().prev().show(); ">Edit</a>';
                                de = ' | <a title="Delete this row" href="javascript:void(0);" onclick="jQuery(\'#list\').delGridRow('+id+'); ">Delete</a>';
                                se = ' <a title="Save this row" href="javascript:void(0);" onclick="jQuery(\'#list\').saveRow('+id+'); jQuery(this).parent().hide(); jQuery(this).parent().next().show();">Save</a>';
                                ce = ' | <a title="Restore this row" href="javascript:void(0);" onclick="jQuery(\'#list\').restoreRow('+id+'); jQuery(this).parent().hide(); jQuery(this).parent().next().show();">Cancel</a>';
                                jQuery('#list').jqGrid('setRowData',id,{act:'<span id="save_row_'+id+'">'+se+ce+'</span>'+'<span style=display:none id="edit_row_'+id+'">'+be+de+'</span>'});
                            }
                        }
                    });                    
                    $.jgrid.edit.addCaption = "Add Department";
                    $.jgrid.edit.bSubmit = "Save";
                    $.jgrid.del.bSubmit = "Delete Department";
                    $.jgrid.edit.width = 400;
                    //$.jgrid.edit.height = 150;
                    jQuery("#list").navGrid('#pager',{
                        edit:true,add:true,del:true,search:false,alertcap:"Warning!!",alerttext:"Please, select Department"},
                        {
                            modal: true, reloadAfterSubmit: false,  closeOnEscape: false, closeAfterEdit: true,
                            afterSubmit: function(response,postdata){
                                if (response.responseText == "") {
                                    successMsg('Edited Successfully');
                                    return [true, response.responseText]
                                } else {
                                    return [false, response.responseText]
                                }
                            }
                        },
                        {
                            modal: true, reloadAfterSubmit: true,  closeOnEscape: false, closeAfterAdd: true,
                            afterSubmit: function(response,postdata) {
                                if (response.responseText == "") {
                                    successMsg('Added Successfully');
                                     return [true, response.responseText]
                                 } else {
                                     return [false, response.responseText]
                                 }
                             }
                        },
                        {
                            modal: true, reloadAfterSubmit: true,  closeOnEscape: false, closeAfterDelete: true,
                            afterSubmit: function(response,postdata){
                                if (response.responseText == "") {
                                    successMsg('Deleted Successfully');
                                     return [true, response.responseText]
                                 }
                                 else {
                                    alert("Unable to deleted, Please try again !");
                                     return [false, response.responseText]
                                }
                            }
                                
                        }    
                    );
                    jQuery("#list").filterToolbar({autosearch:true, searchOnEnter:false});
                    //jQuery("#list").jqGrid('gridResize',{})
                });
                //jQuery("#list").dialog({ show: 'fade', hide: 'drop' });              
</script>

thank you,

ok got the problem, the json i created is not .json file . Is it mandetory to have extension as .json . Currently i print a josn object  with the help of jsp file