YUI DataTable – Using a dateCellEditor with an asyncSubmitter

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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

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

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

Yogesh

January 13th, 2010 at 9:29 am

Nice example of asyncSubmitter. It worked in my case. In YUI, they have not given any example of this. I was looking for what the function callback (first argument in function which is property of asyncSubmitter) would look like. In your example it looks like dictionary (with keys success, failure and scope), not a function. can you explain what functionality of Javascript is this ? any tutorial links ?

K. Beau Beauchamp

January 14th, 2010 at 4:21 pm

This was REALLY helpful. Thanks a bunch!!!!!

james young

YUI DataTable – Using a dateCellEditor with an asyncSubmitter

2 comments to YUI DataTable – Using a dateCellEditor with an asyncSubmitter

Leave a Reply

Recent Posts

Archives

Meta

james young

YUI DataTable – Using a dateCellEditor with an asyncSubmitter

2 comments to YUI DataTable – Using a dateCellEditor with an asyncSubmitter

Leave a Reply

Tags

Recent Posts

Archives

Meta