Flexigrid jquery plugin stuck at "processing, please wait"

Question

I am trying to set up flexigrid on my website...
Everything seems to be fine except for the fact that the data just never loads!
It is stuck at "processing, please wait"

Here is my html file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="jQuery/flexiGrid/css/flexigrid.css" />
<script type="text/javascript" src="jQuery/flexiGrid/jquery.pack.js"></script>
<script type="text/javascript" src="jQuery/flexiGrid/js/flexigrid.js"></script>


 <link rel="stylesheet" href="jQuery/style.css" type="text/css" media="screen"/>


<link rel="stylesheet" href="styles.css" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Bird Eye View Flexi Comment Box</title>
<script type="text/javascript">
$(document).ready(function(){

    $("#flex1").flexigrid
            (
            {
            url: 'get_domains.php?client_id=1',
            dataType: 'json', 
            colModel : [
                {display: 'ID', name : 'domain_id', width : 100, sortable : true, align: 'center'},
                {display: 'Domain Name', name : 'domain_name', width : 560, sortable : true, align: 'left'},
                {display: 'Time Stamp', name : 'timestamp', width : 100, sortable : true, align: 'left'}
                ],
            buttons : [
                {name: 'Delete', bclass: 'delete', onpress : test},

                ],
            sortname: "ID",
            sortorder: "asc",
            usepager: true,
            title: 'Fudge',
            useRp: true,
            rp: 10,
            showTableToggleBtn: false,
            width: 760,
            height: 255
            }
            );   

});
function sortAlpha(com)
            { 
            jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
            jQuery("#flex1").flexReload(); 
            }

function test(com,grid)
{
    if (com=='Delete')
        {
           if($('.trSelected',grid).length>0){
           if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
            var items = $('.trSelected',grid);
            var itemlist ='';
            for(i=0;i<items.length;i++){
                itemlist+= items[i].id.substr(3)+",";
            }
            $.ajax({
               type: "POST",
               dataType: "json",
               url: "delete.php",
               data: "items="+itemlist,
               success: function(data){
                alert("Query: "+data.query+" - Total affected rows: "+data.total);
               $("#flex1").flexReload();
               }
             });
            }
            } else {
                return false;
            } 
        }
    else if (com=='Add')
        {
            alert('Add New Item Action');

        }            
} </script>
</head>

<body>
<div id="container">
<div id="header">
<h1>Flexi Comment Box Bird Eye View</h1>
<h3>Hello <?php echo $row_getClientName['first_name']; ?>,</h3>
</div>
<div id="navigation"> 
<ul>
            <li><a href="bird_eye_view_hub.php">Home</a></li>
            <li><a href="#">Domains</a></li>
            <li><a href="bird_eye_view_pages.php">Pages</a></li>
            <li><a href="bird_eye_view_comments.php">Comments</a></li>
            <li><a href="#">Support</a></li>
    </ul>
</div> <!--end of navigation-->
<div id="content">
<table id="flex1" style="display:none"></table>
<br /><br />

</div><!--contents div ends here-->
</div><!--container ends here-->
</body>
</html>
<?php
mysql_free_result($getClientName);

mysql_free_result($doms);

mysql_free_result($NumOfPages);

mysql_free_result($NumOfComments);
?>

the funny thing is, I can get the data just fine in my Dreamweaver testing browser...
could someone please point me in the right direction?

Answer 1

Well I figured it out myself (Im not feeling genius, more on the lines of persistent if you may :D)
I was missing the header info....
just for the sake of others having to deal with this ordeal :

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-type: text/x-json");