Question

I’m a jQuery/jqGrid newbie…

I’ve got my jqGrid selecting and displaying my data correctly. I also have the edit/add buttons adding/editing data on my grid. However, I’m not sure how I make those adds/edits update MySQL database. Any suggestions?

Here is my scripts.js file:

 $("#table-maintenance-conflicts").jqGrid(
    { 
        url:'maintenanceConflicts.php', 
        editurl:'maintenanceConflicts-edit.php',
        datatype: 'xml',
        mtype: 'GET',
        colNames:['Conflict Code', 'Description', 'Updated By', 'Updated On'], // Set column names of the grid
        colModel :[ // Set the settings for each individual column of the grid
            {
                name:'conflictCode', 
                index:'conflictCode', 
                width:120, 
                align:'center', 
                editable:false, 
            }, 
            {name:'description', index:'description', width:200, editable:true, edittype:"text"}, 
            {name:'updatedBy', index:'updatedBy', width:120, editable:true, edittype:"text", editrules: {required: true}}, 
            {name:'updatedOn', index:'updatedOn', width:120, editable:false, editrules: {required: true}}
        ], 
        pager: '#pager-maintenance-conflicts', 
        rowNum:10, // To start, the user will see 10 records on the first page
        rowList:[10,15,20], // How many records is the user able to see per page?
        sortname: 'conflictCode',
        sortorder: 'desc', // Order the 'sortname' should be sorted in
        viewrecords: true, // View the records upon grid startup? or wait until a search?
        caption: 'Maintenance | Conflicts' // Title of the grid (at the top)
    }).navGrid('#pager-maintenance-conflicts',{
        edit:true,
        add:true,
        view:true,
        del:true,
        search:true,
        refresh:true
    });

// ADD
$("#add_table-maintenance-conflicts").click(function(){

    jQuery("#table-maintenance-conflicts").jqGrid('editGridRow',"new",{
        mtype: 'POST',
        reloadAfterSubmit:false, 
        closeAfterAdd:true,         
    });

});

// EDIT
$("#edit_table-maintenance-conflicts").click(function(){

    var gr = jQuery("#table-maintenance-conflicts").jqGrid('getGridParam','selrow');
    if( gr != null ) 
        jQuery("#table-maintenance-conflicts").jqGrid('editGridRow',gr,{
            mtype: 'POST',
            reloadAfterSubmit:false, 
            closeAfterEdit:true
        });

});

// DELETE
$("#del_table-maintenance-conflicts").click(function(){

    var gr = jQuery("#table-maintenance-conflicts").jqGrid('getGridParam','selrow');
    if( gr != null ) 
        jQuery("#table-maintenance-conflicts").jqGrid('delGridRow',gr,{
            mtype: 'POST',
            reloadAfterSubmit:false
        });

});

Here is my maintenanceConflicts-edit.php file:

<?php 

//include the information needed for the connection to MySQL data base server. 
// we store here username, database and password 
$dbhost = "localhost";

$dbuser = "root";

$dbpassword = "";

$database = "ftdbadmin";

// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
//echo "Connected to MySQL <br />";

// select the database
mysql_select_db($database) or die("Error conecting to db.");
//echo "Connected to the selected database: ".$database."<br />";

//  If we're ADDING
if($_POST['oper']=='add')
{

}

// If we're EDITING
if($_POST['oper']=='edit')
{
    $conflictCode     =   mysql_real_escape_string($_POST['conflictCode']);
    $description   =   mysql_real_escape_string($_POST['description']);
    $updatedBy =   mysql_real_escape_string($_POST['updatedBy']);
   // $updatedOn    =   mysql_real_escape_string($_GET['updatedOn']);

$SQL = "UPDATE tblconflict SET updatedBy = '".$updatedBy."', description = '".$description."' WHERE conflictCode = ".$conflictCode;

    echo $SQL;
    $result=mysql_query($SQL) or die(mysql_error());

    mysql_close($db);
}

// If we're DELETING
if($_POST['oper']=='del')
{

}

?>

Any help would be greatly appreciated!!

Answer 1

I managed to figure this out a few months ago by poking around the Wiki, Google, and here on this site. I stumbled across this PHP CRUD template for jQGrid. With a little tweaking, I got it working with all my grids. Once you begin to work with it more, you will notice lots of room for improvement and expansion. It should get you started in the right direction.