Fill jqgrid with data from visualforce page

Question

I have a visualforce page and I am using jqgrid to display data on this page. The url that the jqgrid points to is a visualforce page(https://test.visual.force.com/apex/GridResults) which outputs only JSON data. This page does not have any header or html information.

The problem is that when I run this page, the grid renders with column names but no data. When I run the url it outputs JSON data. I have pasted below the code.

   jQuery("#list").jqGrid({
        url:"https://test.visual.force.com/apex/GridResults",
        datatype: "json",
        colNames: [{!fieldNames}], -- property in controller  which outputs fieldnames 
        colModel: [{!colModel}], -- property in controller which outputs column definition
        rowNum: 10,
        rowTotal:10,
        rowList: [20, 40, 60],
        loadonce:true,
        mtype:"GET",
        gridView:true,
        pager: '#pager',
        sortname: 'Record ID',
        sortorder: "desc",
        width: 1200,
        height: 400,
        caption: "Accounts"
    });  
    jQuery("#list").jqGrid('navGrid', "#pager", { edit: true, add: true, del: false })
    };

Any ideas on why the data from the page is not consumed by the jqgrid? Help much appreciated.