YUI DataTable – Using a dateCellEditor with an asyncSubmitter

James Young — Thu, 30 Jul 2009 03:02:26 +0000

If you are wondering what a dateCellEditor and asyncSubmitter are go check out http://developer.yahoo.com/yui/examples/datatable/dt_cellediting.html. See the last_login column? Click on that, you will get a cool calendar that pops up for you to change the date. Pretty handy. That Inline Cell Editing page touches on how to implement that, but it doesn’t cover the actual asyncSubmitter when using a dateCellEditor which is where I could have used a bit more information.

This example uses five files:

index.html – template for the page
javascript.js – javascript that powers the datatable
datatabledata.php – back end process that returns the data for the datatable in JSON format
update.php – back end process that updates the data in the database based on what the user changed

Below is a code example that spells it all out.

index.html


<html>
<head>
    <title>DataTable inline cell editing with dateCellEditor and asyncSubmitter example</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/base/base-min.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css">
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/calendar/assets/skins/sam/calendar.css">
</head>
 
<body class='yui-skin-sam'>
    <div id="datatable"></div>
    <script src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/calendar/calendar-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
    <script src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
    <script src="javascript.js"></script>
</body>
</html>

javascript.js

var STWPT = YAHOO.namespace("stwpt");
 
STWPT.init = function ()
{
    STWPT.getDataTableData();
};
 
STWPT.getDataTableData = function ()
{
    var submitter = function (callback, newValue)
    {
        var record = this.getRecord();
        var column = this.getColumn();
        var oldValue = this.value;
        var datatable = this.getDataTable();
 
        // send the data to our update page to update the value in the database
        YAHOO.util.Connect.asyncRequest('POST', 'update.php',
        {
            success: function (o)
            {
                var r = YAHOO.lang.JSON.parse(o.responseText);
 
                if (r.replyType === 'date') { r.data = YAHOO.util.DataSource.parseDate(r.data); }
 
                if (r.replyCode === '201') { callback(true, r.data); }
                else
                {
                    alert(r.replyText);
                    callback();
                }
            },
            failure: function (o)
            {
                alert(o.statusText);
                callback();
            },
            scope: this
        },
        'action=cellEdit&column=' + column.key +
                     '&newValue=' + escape(newValue) +
                     '&oldValue=' + escape(oldValue) +
                      '&team_id=' + record.getData('team_id') +
                     '&type=team'
        );
    };
 
    var textEditor = new YAHOO.widget.TextboxCellEditor({ disableBtns: false, asyncSubmitter: submitter });
 
    var myColumnDefs = [
        { key: 'team_id', label: 'Id', hidden: true },
        { key: 'name', label: 'Team Name', sortable: true, resizeable: true, editor: textEditor },
        { key: 'start_date', label: 'Start Date', sortable: true, resizeable: true, editor: new YAHOO.widget.DateCellEditor({ asyncSubmitter: submitter }), formatter: YAHOO.widget.DataTable.formatDate
        { key: 'end_date', label: 'End Date', sortable: true, resizeable: true, editor: new YAHOO.widget.DateCellEditor({ asyncSubmitter: submitter }), formatter: YAHOO.widget.DataTable.formatDate }
    ];
 
    var myDataSource = new YAHOO.util.DataSource('datatabledata.php');
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
    myDataSource.connXhrMode = 'queueRequests';
    myDataSource.connMethodPost = true;
    myDataSource.responseSchema = {
        resultsList: 'teams',
        fields: ['team_id', 'name', { key: 'start_date', parser: 'date' }, { key: 'end_date', parser: 'date' }]
    };
 
    var myDataTable = new YAHOO.widget.DataTable('datatable', myColumnDefs, myDataSource);
 
    var onCellClick = function (oArgs) { this.onEventShowCellEditor(oArgs); };
 
    myDataTable.subscribe('cellClickEvent', onCellClick);
 
    var mySuccessHandler = function () {
       this.onDataReturnAppendRows.apply(this, arguments);
    };
 
    var myFailureHandler = function () { alert('FAIL'); };
 
    var callback = {
        success: mySuccessHandler,
        failure: myFailureHandler,
        scope: myDataTable
    };
 
};
 
YAHOO.util.Event.onDOMReady(STWPT.init);

datatabledata.php


// NOTE: if this wasn't an example, this would be done in CodeIgniter
mysql_pconnect('localhost', 'msyql_username', 'mysql_password');
mysql_select_db('mysql_database_name');
 
$user_id = 1;      // hardcoded for this example
$facility_id = 1;  // hardcoded for this example
 
$teams = array();
 
$sql = "SELECT t.id AS team_id,
               t.name,
               t.datatable_key,
               DATE_FORMAT(t.start_date, '%m/%d/%Y') AS start_date,
               DATE_FORMAT(t.end_date, '%m/%d/%Y') AS end_date
          FROM teams AS t,
               user_facility_teams AS uft
         WHERE uft.user_id = {$user_id}
           AND uft.facility_id = {$facility_id}
           AND t.id = uft.team_id
";
 
$result = mysql_query($sql);
 
while ($row = mysql_fetch_array($result))
{
    array_push($teams, $row);
}
 
$response = '{"teams" : ';
$response .= json_encode($teams);
$response .= '}';
 
echo $response;

update.php


// NOTE: if this wasn't an example, this would be done in CodeIgniter
mysql_pconnect('localhost', 'msyql_username', 'mysql_password');
mysql_select_db('mysql_database_name');
 
$user_id = 1;      // hardcoded for this example
$facility_id = 1;  // hardcoded for this example
 
$data['column'] = $_POST['column'];
$data['value'] = trim($_POST['newValue']);
$data['team_id'] = $_POST['team_id'];
 
 
$json_response_value = $data['value'];
 
foreach ($data as $key => $value) { $data[$key] = mysql_real_escape_string($data[$key]); }
 
// if we are changing the 'name' we must also update the key used for datatable column definitions
$set_datatable_key = '';
if ($data['column'] == 'name')
{
    $datatable_key = preg_replace('/[ -]/', '_', $data['value']);
    $datatable_key = preg_replace('/%/', 'percent', $datatable_key);
    $datatable_key = strtolower($datatable_key);
 
    $set_datatable_key = ", datatable_key = '{$datatable_key}'";
 
    $sql = "UPDATE teams
               SET {$data['column']} = '{$data['value']}' {$set_datatable_key}
             WHERE id = {$data['team_id']}
    ";
 
    $replyType = 'string';
}
 
if ($data['column'] == 'start_date' || $data['column'] == 'end_date')
{
    $sql = "UPDATE teams
               SET {$data['column']} = STR_TO_DATE('{$data['value']}', '%a %b %d %Y')
             WHERE id = {$data['team_id']}
    ";
 
    $replyType = 'date';
}
 
$result = mysql_query($sql);
 
$response = array('replyCode' => '201', 'replyText' => 'Ok', 'replyType' => $replyType, 'data' => $json_response_value);
 
echo json_encode($response);

james young » asyncSubmitter

YUI DataTable – Using a dateCellEditor with an asyncSubmitter