Great article about ECMAScript Internationalization API.

I ran across this great introduction article to ECMAScript's new International API, written by Raymond Camden

The article is at http://code.tutsplus.com/tutorials/working-with-intl--cms-21082, and it has great examples of showing how to sort strings, format dates and numbers with International options.

Using JavaScript to find the cursor position of a keypress.

Have you ever needed to prevent one or more characters from occupying a particular position in an input field? Well recently I needed to ensure that a dash was not the first character in a string, but it was permissible in other parts of the string. So I started wondering if it was possible to get the position via JavaScript. Turns out it is possible with element.target.selectionStart

In my example below, we only allow the first character of a string to be a letter:

YUI DataTable and Non-US Currency Formats

Recently I have been adding in localized currency formatting to the echotools platform. In most cases I can use the Zend Framework, Zend_Currency to handle most of the heavy lifting. However, we are starting to use the YUI DataTable more and more often, and one such page had me scratching my head trying to figure out how to display a non-US currency in a sortable column.

You see when the columns are not sortable, we can easily treat the column like it is a string, and simply pass in the value with say the British Pound (GBP) symbol or the Euro symbol. But as soon as you want to sort on this column you run into issues. If you set it to a string, then 14.95 comes before 2.50, and that's no good.

If you have ever setup a DataTable, then you probably know that can provide a formatter for the table column, which we had set to currency. When that is the case, YUI defaults to the US Dollar (USD) format. Getting it to show GBP or Euro takes a little work. After a bit of digging around I found that you can modify the currency options as part of your table configuration. Below is an example:

For more details on YUI DataTable options, follow this link to Yahoo's developer network: http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html#config_currencyOptions

YUI DataTable doesn't render in IE7

Recently I ran into an issue where we were using a YUI DataTable that worked great in FireFox, Safari and Opera, but when it came to IE 6 & 7 it was a different story.

Our code page was originally rendering the data from a JSON feed. But as I attempted to diagnose, I decided to have PHP render the data into a HTML Table, and change the expected data type to TYPE_HTMLTABLE. Still I continued to have issues, only now in FireFox and Safari, both the HTML table and the YUI DataTable were showing, but IE would only show the HTML table.

After a few more hours of hair pulling and eye straining, I discovered the problem. It turns out that the code page included a header and footer. As it turns out, the header, opened a HTML Table and the footer closed that table. That said, no where in my code page did it open a table row and table cell. So once I wrapped my code in a TR/TD set, low and behold it worked as expected in all of the major browsers.

Below is a condensed version of my final solution.


<?php echo $this->render('header.phtml'); ?>

<!-- The header.phtml ends with a table tag, but does not open a row, be sure to add it -->
<!-- Open up a table row and table cell, otherwise the YUI datagrid will not display correctly -->
<tr><td>

<!-- Assume there are links to YUI controls here -->

<div id="markup" style="width:850px; text-align:center;">
   <table id="data" width="100%" border="0" cellspacing="0" cellpadding="1" class="itemList">
      <thead>
         <tr class="itemListTitle">
            <?php foreach($this->columnDefs as $columnArray) : ?>
               <td><?php echo $columnArray['label']; ?></td>
            <?php endforeach; ?>
         </tr>
      </thead>
      <tbody>
         <?php foreach($this->importData as $importArray) : ?>
         <tr>
            <?php foreach($this->importSchema as $colName) : ?>
            <td><?php echo$importArray[$colName] ?></td>
            <?php endforeach; ?>
         </tr>
         <?php endforeach; ?>
      </tbody>
   </table>
</div>

< S C R I P T type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
   YAHOO.example.EnhanceFromMarkup = new function() {
      var myColumnDefs = [
            {key:"id",label:"Import",sortable:true},
            {key:"category",label:"Category/Name",sortable:true},
            {key:"uploaddate", label:"Upload Date",sortable:true},
            {key:"uploader",label:"Uploaded By",sortable:true},
            {key:"list",label:"Mailing List",sortable:true},
            {key:"checks",label:"Import Progress",sortable:true},
            {key:"status",label:"Status",sortable:true}
         ];
      

      var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("data"));
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
      myDataSource.responseSchema = {
         fields: [ {key: "id", parser:"number" },
      {key: "category" },
      {key: "uploaddate" },
      {key: "uploader" },
      {key: "list" },
      {key: "checks" },
      {key: "status" }
   ]
};

      var oConfigs = {
         paginator: new YAHOO.widget.Paginator({rowsPerPage: 10}),
         sortedBy: {key:"id",dir:"desc"}
      };

      // Load the datatable       var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource, oConfigs);
      
   };
});
</script>

<!-- Close the Outer Table Row -->
   </td>
</tr>

<?php echo $this->render('footer.phtml'); ?>

BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.