Guardar cambios en SlickGrid con php

Ok, encontré el problema, en caso de que alguien esté luchando para que todo esto funcione, aquí está el código de trabajo, obtiene datos de una base de datos, luego envía los datos modificados a otra página para su procesamiento, necesita un poco de refinamiento , eso sucederá una vez que lo tenga todo implementado:
<?php 
include("includes/check_session.php");
require_once('includes/functions.php');
require_once('includes/config.php');

$data = '';
$i = 0;

$query = "
    SELECT * FROM `prices`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
    $data .= '
        data['.$i.'] = {
            id: "'.$row['id'].'",
            title: "'.$row['title'].'",
            duration: "'.$row['duration'].'",
            percentComplete: "'.$row['percentComplete'].'",
            start: "'.$row['start'].'",
            finish: "'.$row['finish'].'",
            effortDriven: "'.$row['effortDriven'].'"
        };
    ';

    $i++;

echo $data;
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>

    <?php // include("includes/cms_head_scripts.php"); ?>
    <link rel="stylesheet" href="css/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
    <link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" charset="utf-8" />
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script language="javascript" src="js/jquery.json.js"></script>

</head>
<body>
    <div id="content_cont">

        <div id="main">

                <div style="position:relative">
                    <div style="width:600px;">
                        <div id="myGrid" style="width:100%;height:500px;"></div>
                    </div>
                </div>  



            pricing

        </div><!-- #main -->

    </div><!-- #content_cont -->

        <script src="lib/firebugx.js"></script>


        <script src="lib/jquery-ui-1.8.5.custom.min.js"></script>
        <script src="lib/jquery.event.drag-2.0.min.js"></script>

        <script src="slick.core.js"></script>
        <script src="plugins/slick.cellrangeselector.js"></script>
        <script src="plugins/slick.cellselectionmodel.js"></script>
        <script src="slick.editors.js"></script>
        <script src="slick.grid.js"></script>


        <script type="text/javascript">
            var grid;
            var data = [];
            var columns = [
                {id:"title", name:"Title", field:"title", editor:TextCellEditor},
                {id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
                {id:"%", name:"% Complete", field:"percentComplete", editor:TextCellEditor},
                {id:"start", name:"Start", field:"start", editor:TextCellEditor},
                {id:"finish", name:"Finish", field:"finish", editor:TextCellEditor},
                {id:"effort-driven", name:"Effort Driven", field:"effortDriven", editor:TextCellEditor}
            ];

            var options = {
                    editable: true,
                    enableCellNavigation: true,
                    asyncEditorLoading: false,
                    autoEdit: true
                };

            $(function() {

                <?php echo $data ?>
                grid = new Slick.Grid($("#myGrid"), data, columns, options);

            })



        </script>

<form method="POST" action="save_price.php">
    <input type="submit" value="Save">
    <input type="hidden" name="data" value="">
</form>
<script type="text/javascript">
  $(function() {
    $("form").submit(
      function() {
        $("input[name='data']").val($.JSON.encode(data));

      }
    );
  });
</script>

</body>
</html>