jqgrid : empty grid with json call

Question

I have a empty grid with jquery+jqgrid+php+json.

My grid.local-xx is before the jqgrid lib

script type="text/javascript" src="/v2/back/js/jquery.min.js

script type="text/javascript" src="/v2/back/js/jqgrid/grid.locale-fr.js

script type="text/javascript" src="/v2/back/js/jqgrid/jquery.jqGrid.min.js

Here is the json response :

{"page":null,"total":0,"records":7,"rows":[{"id":"1","cell":["","GRATUIT",null,null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/1\" >setOptions<\/a>"]},{"id":"2","cell":["","PACK 1","30",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/2\" >setOptions<\/a>"]},{"id":"3","cell":["","PACK 2","50",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/3\" >setOptions<\/a>"]},{"id":"4","cell":["","PACK 3","70",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/4\" >setOptions<\/a>"]},{"id":"5","cell":["","PACK 4","90",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/5\" >setOptions<\/a>"]},{"id":"6","cell":["","PACK 5","150",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/6\" >setOptions<\/a>"]},{"id":"8","cell":["","Pack 6","1",null,null,null,"Actif","<a href=\"\/admin\/compositionpack\/index\/id\/8\" >setOptions<\/a>"]}]}

And here is my javascript call :

<div id="liste">
<div id="messagebox"></div>
<div id="filter"></div>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

<script type="text/javascript">
$(document).ready(function(){
   $("#list").jqGrid({
        url:'/admin/pack/showgrid/',
        datatype: 'json',
        mtype: 'POST',
        colNames:['','Libellé', 'Montant','Montant Promo','Du','Au','Etat','Option'],
        colModel:[
            {name:'edition',index:'edition', sortable:false,editable: false,width:10, align:"center"},
            {name:'pack_libelle',index:'pack_libelle', sortable:true, editable: true,width:120, align:"center"},
            {name:'pack_montantHT',index:'pack_montantHT', sortable:true, editable: true,width:120, align:"center"},
            {name:'pack_montantPromoHT',index:'pack_montantPromoHT', sortable:true, editable: true,width:140, align:"center"},
            {name:'pack_dateDebutPromotion',index:'pack_dateDebutPromotion', sortable:true, editable: true,width:160, align:"center"},
            {name:'pack_dateFinPromotion',index:'pack_dateFinPromotion', sortable:true, editable: true,width:160, align:"center"},
            {name:'pack_isActif',index:'pack_isActif', editable: true,width:120, align:"center",edittype:'select',editoptions:{value:"1:Actif;0:Inactif"}},
            {name:'pack_option',index:'pack_option', editable: false,width:120, align:"center"}
        ],
        pager: '#pager',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'pack_isActif',
        viewrecords: true,
        autowidth: true,
        rownumbers: false,
        gridview : true,
        sortorder: "desc",
        caption:"Liste des packs activés ou désactivés"
        });
      jQuery("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:false});

    jQuery("#list").jqGrid('navButtonAdd',"#pager",
        {caption:"Add", title:"Ajouter un nouveau pack", buttonicon:'ui-icon-plus',
            onClickButton:function(){
                jQuery("#list").editGridRow( "new", {
                    url:'/v2/admin/pack/insert',
                    top:250,
                    left:500,
                    height:280,
                    width:500,
                    closeAfterAdd:true,
                    reloadAfterAdd:true                        
                } );
            }
        }
     );      

    jQuery("#list").jqGrid('navButtonAdd',"#pager",
        {caption:"Modif.",title:"Modifier un enregistrement",buttonicon:'ui-icon-pencil',
            onClickButton:function(){
                var gr = jQuery("#list").jqGrid('getGridParam','selrow');
                if( gr != null ){
                    jQuery("#list").jqGrid('editGridRow',gr,{
                        height:280,
                        width:500,
                        reloadAfterSubmit:true,
                        url:'/v2/admin/pack/edit',
                        top:250,
                        left:500,
                        closeAfterEdit:true,
                        processData: "Chargement..."
                    });
                }else{
                    alert("Choisir un enrégistrement s'il vous plaît. \r\nMerci");
                }
            }
        }
     );

    jQuery("#list").jqGrid('navButtonAdd',"#pager",
        {caption:"Suppr.",title:"Supprimer un enregistrement",buttonicon:'ui-icon-trash',
            onClickButton:function(){
                var gr = jQuery("#list").jqGrid('getGridParam','selrow');
                if( gr != null ){
                    jQuery("#list").delGridRow( gr, {
                            caption: "Suppression",
                            top:250,
                            left:500,
                            msg: "Vous êtes sûr ?",
                            url:'/admin/pack/delete/',
                            processData: "Chargement..."
                    } );
                }else{
                    alert("Choisir un enrégistrement s'il vous plaît. \r\nMerci");
                }
            }
        }
     );
});

The layout is generate, the three buttons are added... but the grid is empty.

Anyone can help me ?

Answer 1

I recommend you to look at another part of your code which you not posted here because your code can do read the JSON data which you posted. See the demo. Some changes like usage of "page":1,"total":1 instead of "page":null,"total":0 in the JSON data, closing tag for <div id="liste"> (if it is not exist) and some other changes would be recommended, but I am not think that it is your main problem.

One of the typical possible reason could be the value of "Content-Type" header of the HTTP response which should be application/json. In any way I would recommend you to include loadError callback/event in the jqGrid. See the answer for more details.