jqGrid is not populating with JSON data from PHP

Question

all.

I've been trying to get this to work all day. I think my JSON data is being returned in the correct format but the grid is coming up empty.

You can see both the grid and the data which I printed as a string by following this URL:

http://wptest.andrux.net/?p=371

Here's my PHP code:

    /* connect to the database */
    mysql_connect( DB_HOST, DB_USER, DB_PASSWORD )
        or die( 'Connection Error: ' . mysql_error() );

    mysql_select_db( DB_NAME )
        or die( 'Error connecting to database ' . DB_NAME );

    $options = get_option( 'my-queries' );

    /* most queries are saved with escaping quotes */
    $query = stripslashes( $options[ $_POST['id'] ]['query'] );

    $result = mysql_query( $query )
        or die( 'Couldn\'t execute query. ' . mysql_error() );

    /* load column names from the database */
    $col_names = array();
    while ( $column = mysql_fetch_field( $result ) ) {
        $col_names[] = $column->name;
    }

    $response->page = 1;
    $response->total = 1;
    $response->records = mysql_num_rows( $result );
    $i = 0;

    while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {
        $cells = array();
        foreach ( $col_names as $col_name ) {
            $cells[] = $row[ $col_name ];
        }
        $response->rows[ $i ]['id'] = $cells[0];
        $response->rows[ $i ]['cell'] = $cells;
        $i++;
    }

    echo json_encode( $response );

And here's my javascript:

var data = {
        action: 'build_jqgrid_table',
        id: 0
    };

$.post( 'http://wptest.andrux.net/wp-admin/admin-ajax.php', data, function( response ) {
    $( '#test-div' ).html( response );
});


$( '#db-query-shortcode-table' ).jqGrid({
    url: 'http://wptest.andrux.net/wp-admin/admin-ajax.php?action=build_jqgrid_table&id=0',
    datatype: 'json',
    colNames: [ 
        'Submitted',
        'changed_address',
        'cancelled_subscription',
        'name',
        'address1',
        'address2',
        'city',
        'state',
        'zip',
        'country',
        'phone',
        'email',
        'Submitted_Login',
        'Submitted_From',
        'fields_with_file' 
    ],
    colModel: [ 
        { name: 'Submitted', index: 'Submitted', width: 55, editable: true },
        { name: 'changed_address', index: 'changed_address', width: 55, editable: true },
        { name: 'cancelled_subscription', index: 'cancelled_subscription', width: 55, editable: true },
        { name: 'name', index: 'name', width: 55, editable: true },
        { name: 'address1', index: 'address1', width: 55, editable: true },
        { name: 'address2', index: 'address2', width: 55, editable: true },
        { name: 'city', index: 'city', width: 55, editable: true },
        { name: 'state', index: 'state', width: 55, editable: true },
        { name: 'zip', index: 'zip', width: 55, editable: true },
        { name: 'country', index: 'country', width: 55, editable: true },
        { name: 'phone', index: 'phone', width: 55, editable: true },
        { name: 'email', index: 'email', width: 55, editable: true },
        { name: 'Submitted_Login', index: 'Submitted_Login', width: 55, editable: true },
        { name: 'Submitted_From', index: 'Submitted_From', width: 55, editable: true },
        { name: 'fields_with_file', index: 'fields_with_file', width: 55, editable: true } 
    ],
    rowNum: 10,
    rowList: [ 10, 20, 30 ],
    pager: '#db-query-pager',
    sortname: 'Submitted',
    viewrecords: true,
    sortorder: 'desc',
    //editurl: 'server.php',
    caption: 'Test table'
});

$( '#db-query-shortcode-table' ).jqGrid( 'navGrid', '#db-query-pager', { edit: false, add: false, del: false } );
$( '#db-query-shortcode-table' ).jqGrid( 'inlineNav', '#db-query-pager' );

Anyone who knows what am I missing?

Thank you all in advance

Answer 1

Ok, since nobody was able to help with kqGrid, I just moved to another library. jqGrid might work flawlessly for others, but this is the second time I wanted to use it in 3 years and at least in my case it's a pain to make it work - the first time it worked with tableToGrid() but this time not even that helped.

Anyway, for those interested, jQuery EasyUI works great and it's very easy to setup.

Greetings everyone.