When Flexigrid Columns Don't Line Up

If find it really aggravating to fix a problem only to encounter it again -- after I've long forgotten how I fixed it. This happened to me when I was creating a new PHP wrapper class around the Flexigrid plugin for jQuery.

And the reason was ... the stylesheet had:

table { width: 100%; }

Remove this or add a class or inline style to your table to allow Flexigrid to do its thing.

Of course, I don't actually remember if this is the problem I encountered last time, but I'm posting this for the benefit of all -- including myself.

The Log File is Your Friend

So, I was working with the flexigrid plugin for jquery, which is pretty cool but not very well documented, and I encountered this strange problem where the grid was failing to display the output.

Now, with most of the grid tools you

1. Create only the most basic HTML on your page.
2. Write some javascript to make the AJAX call, also included on your page.
3. Create a PHP (or whatever) script to generate the output which is typically JSON or XML.

In this case, I choose to generate XML for use by the flexigrid plugin. But my grid wasn't working. It would just sit there and spin, saying "processing".

• The jquery javascript was working with no errors (confirmed this in the browser's debugger).
• The PHP script was generating the correct XML (confirmed by manually entering the script address in the browser).

But it wasn't working when the PHP script was called from the javascript on the page.

The solution? When the PHP script was being called from the javascript on the page, the flexigrid plugin was sending sortname and sortorder values that were "undefined" in javascript. So the query against the database was something like "SELECT * FROM sometable ORDER BY undefined". This of course was generating SQL errors and the PHP script was failing to output the XML. But only when called from the page. It was fine when called manually (and flexigrid was bypassed). A simple check for undefined values in the PHP script and all is well.

This brings me to one of the great canons of programming for the Web (and perhaps other types of programming). The Log File is Your Friend. I discovered this problem by tailing the PHP error log. Otherwise, the failure is very puzzling because everything appears to be working, just not together. When using AJAX or creating Web services, things going on unseen may only be exposed by consulting the log(s).