Setting JqGrid's colName and colModel from JSON data

I am开发者_如何学Go trying to generate the list of column names and the column model on the server and feed it to JqGrid. I have successfully generated the JSON and passed it to the client over XHR, no complaints there. But, the grid itself doesn't show up. I see one column of the grid with the grid's fold/unfold button at the top.

Here is the javascript call:

var col_names = [];
var col_model = [];
...
...

jQuery(document).ready(function() {
  //XHR to get col_names and col_model
  $.ajax({url: 'http://localhost:8080/metadata',
          success: function(data) {
            col_names = data.names;
            col_model = data.model;
          }
  });
jQuery("#list").jqGrid({
    url:'http://localhost:8080:/data?level=0',
    datatype: 'json',
    mtype: 'GET',
    colNames: col_names,
    colModel: col_model,
    ...
    ...

Here is the JSON:

{
    "model": [{"index": "pid", "name": "pid"},
              {"index": "p1", "name": "p1"},
              {"index": "p2", "name": "p2"}],
    "names": ["PID", "P1", "P2"]
}

The grid gets displayed if I hard-code the colModel. BTW, in the response headers, content-type is set to "application/json".

TIA

In your posted code, you are initializing the jqGrid before the AJAX call completes:

jQuery(document).ready(function() {
  //XHR to get col_names and col_model
  $.ajax({url: 'http://localhost:8080/metadata',
          success: function(data) {
            col_names = data.names;
            col_model = data.model;
         }
 });
jQuery("#list").jqGrid({
...

You need to either relocate the jqGrid code in the success function, or set the async option to false in your call to $.ajax.

While the AJAX call is pending, you can display a spinner or such on the page to keep the user occupied.