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?

I am sure I am not really far off, im just around the corner! just a nudge and I'll get there! — Marci-man, Jul 28 '11 at 22:10

score 4 · Accepted Answer · answered Jul 28 '11 at 22:25

4

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");

answered Jul 28 '11 at 22:25

Marci-man

2,113
3
28
76

where exactly did you put this headers master~..LOL anyways, can I also use this in my [problem here.](http://stackoverflow.com/questions/7329256/flexigrid-on-rails-problem) – jovhenni19 Sep 07 '11 at 07:09
well the placement of the header info is not really important, but the important part is you shouldn't have already started printing (echoing or whatever your programming language likes to call it) on the screen. I mean if you were to use PHP (which you are not, I know) you should not have already echoed something on the screen. i hope this helps! – Marci-man Sep 07 '11 at 17:51

Flexigrid jquery plugin stuck at "processing, please wait"

1 Answers1