jquery to decode json

Question

i have problem with decode JSON data. actually i want slickgrid work to save in mysql. so, i read [question]:Saving Changes in SlickGrid with php but don't know how to decode the data.

here is my PHP script to process the JSON:

    <script src="jquery-1.7.min.js"></script>
    <script type="text/javascript" src="jquery.json.js"></script>
    <?php

    if(isset($_POST['dataz']))
    {
        ?>
<!--this isn't working-->
        <script>
        var obj = $.JSON.decode(input[name='dataz'].val());
        alert('json decode : '+obj);
        </script>
        <?php
//this produce nothing
        echo json_decode($_POST['dataz']);
        var_dump(($_POST['dataz']));
    }
    else
    {
        echo "No data.";
    }
    ?>

and this is the JSON i tried to decode

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

Answer 1

Alright here is my code for inserting, updating, deleting from SlickGrid to MySQL

    var ajaxFileURL = "fileAjax.php?action=list";   

function populateList(ajaxFileURL) {    
    var msgDelete = 'Do you really want to delete the row?';
    var deleteIcon = "<img src='/images/delete.png' border='0' />";

    // attach the delete event on the ID column
    var columns = [     
        {id:"id", name:"ID", field:"id", width:8, formatter: function (r,c,id,def,datactx){ return "<a href='#' onclick='if (confirm(\""+msgDelete+"\")) removeClick(\""+ajaxFile+"\",\""+id+"\","+r+")'>"+deleteIcon+"</a>";}},
        {id: "title", name: "Title", field: "title", width: 70, minWidth: 50, cssClass: "cell-title", sortable: true, editor: Slick.Editors.Text}
    ];
    var options = {
        enableCellNavigation: true,
        editable: true
    };

    $.getJSON(ajaxFileURL, function (ServerResponse) {
        var groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider();
        dataView = new Slick.Data.DataView({
            groupItemMetadataProvider: groupItemMetadataProvider,
            inlineFilters: true
        });
        grid = new Slick.Grid("#myGrid", dataView, columns, options);

        // This section treats the INSERT/UPDATE
        grid.onCellChange.subscribe(function(e,args) {
            //dataView.updateItem(args.item.id,args.item);
            if (typeof(args.item.id)=='undefined')
                $.post(ajaxFileURL+"?action=insert", args.item);
            else{
                $.post(ajaxFileURL+"?action=update", args.item, function(ServerResponseUpt){
                    // if database return an error then display it to the user and undo the cell change
                    if(parseInt(ServerResponseUpt.affected_rows) < 1 || ServerResponseUpt.error_msg != "") {
                        alert("UPDATE ERROR: "+ServerResponseUpt.error_msg);
                        args.item[ previousCellNames[0] ] = previousCellValues[0];
                        grid.updateRow(args.row);
                        grid.updateRowCount();
                        grid.render();
                    }
                    previousCellNames = new Array();
                    previousCellValues = new Array();
                }, "json");

                // refresh the data on grid
                grid.updateRow(args.row);
                grid.updateRowCount();
                grid.render();
            }
        }); 
        // initialize the model after all the events have been hooked up
        dataView.beginUpdate();
        dataView.setItems(ServerResponse.data);
        dataView.endUpdate();
    } // end of $.getJSON()
} // end of populateList()

// outside function to DELETE
function removeClick(ajaxFileURL, dbRowId, gridRow) {
    $.post( ajaxFileURL+'?action=delete', {id:dbRowId} );
    var item = dataView.getItem(gridRow);//RowNum is the number of the row
    var rowID = item.id
    dataView.deleteItem(rowID);//RowID is the actual ID of the grid row and not the DB row 
    grid.invalidate();
    grid.render();
} 

I'm guessing you already know how to deal with the PHP Ajax file to load data, so just modify the same file to deal with INSERT/DELETE/UPDATE and List... All my action functions are returning JSON, including my grid data. A quick look at my AJAX PHP file would be:

    <?php
switch($_GET['action']) {
    case 'delete':  deleteItem($_POST['id']);
                    break;
    case 'list':    populateList();
                    break;
    case 'update':  updateData();
                    break;
    default:        break;
}

/** Delete an item from the list/DB
 * @param int $id: id number of the item
 */
function deleteItem($id) {
    try{
        // Make the MySQL connection and save it into a global variable
        $mysql = new mysqlDB();
        $mysql->connect();

        // Pull the computer name of the Combo Computer (if exist)
        $sqlDel = sprintf("DELETE FROM table WHERE id='%s'", $id);
        $resultDel = $mysql->query($sqlDel);

        // close the MySQL connection
        $mysql->disconnect();

        print '{ "affected_rows" : '.$resultDel.', "error_msg" : "" }';
    }catch(Error $e){
        print '{ "affected_rows" : 0, "error_msg" : "'.$e->getErrorString().'" }';
    }
}

/** Populate the list with data */
function populateList() {
    try{
        // Make the MySQL connection and save it into a global variable
        $mysql = new productionDB();
        $mysql->connect();
        $mysqli = $mysql->getMysqliObj();
        $mysqli->set_charset("utf8");

        $sqlTable = "SELECT id, title FROM table";
        $result = $mysql->query($sqlTable);

        while( $row = $result->fetch_object() ) {
            $tabData[] = array( "id" => $row->id,
                                "title" => $row->title
                            );
            $nbRows = $result->num_rows; // how many rows does the table have in total?
        }

        // close the MySQL connection
        $mysql->disconnect();

        // Fill the JSON String with the BOM Header info
        $jsonStr .= '{"data":'.json_encode($tabData).',"info" : { "rows" : "'.$nbRows.'"}}';

        print $jsonStr;
    }catch(Error $e){
        print '{ "affected_rows" : 0, "error_msg" : "'.$e->getErrorString().'" }';
    }
}


/** Update some data on the DB */
function updateData() {
    try{
        // Make the MySQL connection and save it into a global variable
        $mysql = new productionDB();
        $mysql->connect();
        $mysqli = $mysql->getMysqliObj();
        $mysqli->set_charset("utf8");

        $groups = '';
        $groupSet = $_POST['defect_group'];
        if( isset($groupSet) ) {
            if( is_array($groupSet) ) {
                foreach($groupSet AS $group) {
                    $groups .= $group.",";
                }
                $groups = substr($groups, 0, -1); // remove last unused comma ","
            }
            else {
                $groups = $groupSet;
            }
        }

        // then make the UPDATE on the table
        $sqlUpdate = sprintf('UPDATE title="%s", WHERE id=%d',
                            $mysqli->real_escape_string($_POST['title'])
                            $_POST['id']
                            );
        $result = $mysql->query($sqlUpdate);

        // close the MySQL connection
        $mysql->disconnect();

        print '{ "affected_rows" : '.$result.', "error_msg" : "" }';
    }catch(Error $e){
        print '{ "affected_rows" : 0, "error_msg" : "'.$e->getErrorString().'" }';
    }
}

That should be enough to put you on road... Enjoy :)