Gemmer ændringer i SlickGrid med php

Ok, så jeg fandt problemet, bare hvis nogen kæmper for at få det hele til at fungere, her er arbejdskoden, den henter data fra en database og sender derefter de ændrede data til en anden side til behandling, det kræver en lille smule justeringer , det vil ske, når jeg har implementeret det hele:
<?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>