Saving Changes in SlickGrid with php_问答_开发者

I have a SlickGrid set up, it is reading data from my database with PHP, my problem is arising when i try to save the data back to my database, I am trying to use JSON to give me an array that I can then use to write back to the database, i have see this thread explaining this:

Saving changes in SlickGri开发者_StackOverflow社区d

So I have the hidden form element in my code, and am using JSON to encode the data variable, the assign it to the data hidden input on the form, this form posts to a page called save_price.php, the trouble is when I print_r, or var_dump the data variable, I get null as an output, I think it might be something to do with how I am using PHP to add the content into the data variable, either that or I am doing something really obviously wrong, hopefully you can see what the problem is, there isn't a great deal of documentation online about retrieving/saving to a db with PHP, so I'm kinda stuck banging my head against the wall on this one, here's my code:

Ok so I found the problem, just incase anyone is struggling to get this all to work, here is the working code, it gets data from a database, then sends the changed data to another page for processing, it nees a little bit of refinements, that will happen once I've got it all implemented:

<?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>