AJAX JSON data is not display in jqGrid

Question

I am new to jqgrid now am trying to show data when click of one colmodel at the time i need to display data in another jqgrid i received data from server and it pass some function and shown data but it not display any data but no error too how to display in it??

gridland.jqGrid({

        datatype:'local',
        data: val,


        colNames:clnms,
        colModel:collmdls,
        rowNum:10,
        rowList:[10,20,30],
        pager: "land_details_table_pager",
        gridview:true,
        //rownumbers:true,
      //  sortname: 'id',
        viewrecords: true,
        sortorder: 'asc',
        caption:"Land Detail",
        height: '100%',
        autowidth:true,
        shrinkToFit:false,



        onCellSelect: function(rowid, index, contents, event) 
        {    



           var cm =  gridland.getGridParam('colModel');

            var rowData = gridland.getRowData(rowid);

            alert("rowData====>"+JSON.stringify(rowData));

            var slNno = rowData['slNno'];

             $("#currpattachk").val(rowid);

             var district;
             var taluk;
             var  village;
             var applId;

             $.each(val,function(k,v){

                 district= v.districtCode;
                 taluk=v.talukCode;
                 village=v.villageCode;
                 applId=v.applicationId;
           });
  if(cm[index].name == "pattaNo")
               {
                    alert("HERE pattaNo");





                   var pattaNo = rowData['pattaNo'];   // perticuler Column name of jqgrid that you want to access
                   var splitsursuvy=rowData['survsub'].split("/");




                  var arr= {}

                 arr.district= district;
                  arr.taluk=taluk;
                 arr.village=village;
                 arr.pattaNo=pattaNo
                arr.surveyno=splitsursuvy[0]  
                arr.subdivno=splitsursuvy[1];
                arr.applicationId=applId;


                var landarrchk=[];
                landarrchk.length=0;


             var inputVal=  JSON.stringify(arr);



                //alert("in fetch owners");
                //alert("inputval====>"+JSON.stringify(arr));
                //alert("inputVal===> "+inputVal);
                //var hash = cal_hmac(xx);
                //var m = "";
            //  document.getElementById('imgdiv').style.display = 'block';

                $.ajax({
                        url: urlService + serviceName + '/getsublanddetails?jsoncallback=?',
                        headers:
                        {
                            "emp_value": ses,
                            "signature": hash,
                            "roleId": roleId,
                            "timestamp": t,
                        },
                        type: 'POST',
                        dataType: 'jsonp',
                        data: inputVal.toString(),
                        // jsonpCallback:"aaa",
                        contentType: "application/json",
                        success: function(data)
                        {


                            var s_no=1;
                            content="";

                            var datachk;

                            /*var survsub;
                            =v.surveynewNo+"/"+v.subDivnewNo;*/

                            $.each(data, function(k, v)
                                    {
                                $.each(v.OwnerData, function(k, v1)
                                        {   

                                    datachk+='<div style="display:none"  id="currpatta'+s_no+'" >'+ JSON.stringify(v1) + '</div>'

                                    $("#landnewdetailchk").html(datachk);

                                    v1.survsub=v1.surveynewNo+"/"+v1.subDivnewNo;
                                    v1.slNno=s_no;
                                    v1.select='<input type="radio" name="subradio" id="subradio" onclick="getcurrpatta(' + s_no + ')" />';

                                    getsublanddetails(v1);


                                        });
                                s_no++;
                                    });

                        },
                        error: function(jqXHR, exception)
                        {
                            // alert("Error:"+JSON.stringify(jqXHR));
                            alert("Error Occured");
                            document.getElementById('imgdiv').style.display = 'none';
                        }
                        });


               }
});
}

second grid:

function getsublanddetails(arr)
{




    alert("Landdetailgrid======="+JSON.stringify(arr));


    clnms=['S.No','SurveyNo/SubDivisionNo','Excet Hect','Excet Hect','Select Subdivision'];

    collmdls=[


               {
                    name:'slNno',
                    index:'slNno',
                    classes:'slNno',
                    width:150,
                    align:'center',
                    sorttype: 'String'
                },

                {
                    name:'survsub',
                    index:'survsub',
                    classes:'survsub',
                    value:20,
                    width:150,
                    align:'center' 
                  //    onCellSelect:ff()   

                   },

                {
                    name:'Exthect',
                    index:'Exthect',
                    classes:'Exthect',
                    width:150,
                    align:'center',
                    sorttype: 'String'
                 }, 


                 {
                    name:'Extarea',
                    index:'Extarea',
                    classes:'Extarea',
                    width:150,
                    align:'center',
                    sorttype: 'String'
                  },

                  {
                        name:'select',
                        index:'select',
                        classes:'select',
                        width:150,
                        align:'center',
                        sorttype: 'String'
                      },
];
$("#landdetailnew").jqGrid({




        datatype:'local',
        data: arr,


        colNames:clnms,
        colModel:collmdls,
        rowNum:10,
        rowList:[10,20,30],
        pager: "landnewdetail",
        gridview:true,

        //rownumbers:true,
      //  sortname: 'id',
        viewrecords: true,
        sortorder: 'asc',
        caption:"New Land Detail",
        height: '100%',
        autowidth:true,
        shrinkToFit:false
});



}

json data are:

Landdetailgrid======={"villageCode":"057","District_Code":"16","Extarea":12,"talukCode":"03","subDivnewNo":"2A","Exthect":0,"curpatta":1840,"surveynewNo":"167   ","survsub":"167   /2A","slNno":1,"select":"<input type=\"radio\" name=\"subradio\" id=\"subradio\" onclick=\"getcurrpatta(1)\" />"}

Landdetailgrid======={"villageCode":"057","District_Code":"16","Extarea":9,"talukCode":"03","subDivnewNo":"2B","Exthect":0,"curpatta":1841,"surveynewNo":"167   ","survsub":"167   /2B","slNno":1,"select":"<input type=\"radio\" name=\"subradio\" id=\"subradio\" onclick=\"getcurrpatta(1)\" />"}

close the `collmdls` array – madalinivascu Apr 23 '15 at 03:59 — madalinivascu, Apr 23 '15 at 03:59

score 0 · Accepted Answer · answered Apr 23 '15 at 05:27

I see some problems in the code which you posted

The data displays after "Landdetailgrid=======" are not array of items. You can't display one item of data. The data should have outer `[].
It seems that you tried to call getsublanddetails function more as once. The first call $("#landdetailnew").jqGrid({...}); will convert the empty table <table id="landdetailnew"></table> in relative complex structure of divs and tables. So you can't do this more as once. What one can do is setting of new value of data option and reloading of jqGrid data using $("#landdetailnew").trigger("reloadGrid");. Alternatively one can use $("#landdetailnew").jqGrid("GridUnload"); to destroy grid before creating another grid on the same place.
The input data for the column 'select' seems have problems. It's OK to have one element on the page in the form, but if the grid would more as one row you will have id duplicates because all elements of the column will have the same id="subradio" attribute (<input type="radio" name="subradio" id="subradio" onclick="getcurrpatta(1)" />).
The general code of onCellSelect callback in the main grid seems too complex and can by reduced in multiple times. I would recommend you to use datatype: "jsonp", loadonce: true in the second grid. You can use ajaxGridOptions: {headers: ...} option to set additional HTTP headers of the request and you can use jsonReader: {root: "OwnerData"} to inform which part of the server response should be used as jqGrid data.
You can remove onclick="getcurrpatta(1)" part which you use in select column. You can use custom formatter to place <input type="radio" name="subradio"/> data in the column. One can use beforeSelectRow or onCellSelect to process the onclick event in the radio button column.

thanks for helping on this data display good and work fine but except one that radio button i dono how to do this where to put ?? kindly help on this on this — user3607180, Apr 23 '15 at 06:17
@user3607180: You are welcome! Look at [the answer](http://stackoverflow.com/a/7401729/315935) or [this one](http://stackoverflow.com/a/14537512/315935): `e.target` is the elements which was clicked in the grid you can test it like `$(e.target).is("input[type=radio")` or `$(e.target).is("input[name=subradio")`. You can use `iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0])` to get the index of the column and test `this.p.colModel[iCol].name === "select". So you can detect `onclick` using `beforeSelectRow`. — Oleg, Apr 23 '15 at 06:58

AJAX JSON data is not display in jqGrid

1 Answers1