Don’t use innerHTML, but use Prototype’s Element.update method!

Note to self: When using prototype don’t use the innerHTML property.

Internet Explorer has got a (in my opinion) broken implementation for certain elements.
It is not possible to change the innerHTML content of the TR and SELECT elements.

Fortunally Prototype has fixed these problems in the Element.update method!


$("tr_id").update( "

Test

" );

Share

Prototype automatic Spinner

I found the following code on the internet. By using this code, a spinner is showed automaticly if an Ajax request is running. Very nice!

// registreer een algemene spinner
Ajax.Responders.register({
  onCreate: function() {
  if (Ajax.activeRequestCount > 0)
    Element.show('spinner');
  },
  onComplete: function() {
  if (Ajax.activeRequestCount == 0)
    Element.hide('spinner');
  }
});

Didn’t know prototype had this global register method. I should take a better look at the API!

Share

Adding Ansi/Integer Date Support to Javascript

A very common way to store and work with dates is the usages of Integers as dates. In the integer the date is stored as YYYYMMDD. Converting from an between the different date formats is not nice if you are using normal functions. Also the Dutch date end user date format is “dd/mm/YYYY”

Well javascript prototypes to the rescue!
Inspired by the “Prototype Library” and Ruby ( on Rails ), I’ve managed to add nicer conversion support between different types.

Some examples of usages

20070212.to_date().to_s()  // Results in  12-02-2006
"24-02-2006".to_date()  // Results in a normal date object

var d = Date.create( 20060102 )   // Creates a Date object with the given
d.add( { months: 5, days: 2 } ).to_s() // Results in 04-06-2006

// add custom formatters with
Date.FORMATS[ 'period' ]  = function(d) {  return d.getFullYear() + "-" + d.getMonth(); }
( new Date() ).to_s( "period" )     // Results in  2007-08

var date1 = Date.create( 20070101 )
date1.diff( Date.now(), 'months')    // 8
... etc ...

Adding extra methods to the Date, String and Number objects can be done like this:

// for example the "to_s" method
Date.prototype.to_s = function( format ) {
if( !format ) format = 'default'
if( !Date.FORMATS[ format ] ) throw "Date format niet gevonden!";
return Date.FORMATS[ format ]( this );
}

// method for converting a number to a date
Number.prototype.to_date = function() {
var v = this.valueOf();
if( v == 0 ) return null;
return Date.new( v );
}

Some problems and frustrations I’ve encountered:

  • Stupid IE, doesn’t allow to define setter en getter properties. The ECMA standard defines the following method for defining setters. The code below works in Mozilla Firefox. You can get the ‘integer’ date by using ( new Date() ).ansidate
    Date.prototype.ansidate getter function() { return this.getFullYear() * 10000 + (this.getMonth()+1) * 100 + this.getDate() } ;
    

    Firefox also supports the following legacy method for defining getters. This support has been there for quite a long time.

    Date.prototype.__defineGetter__( "ansidate", function() { return this.getFullYear() * 10000 + (this.getMonth()+1) * 100 + this.getDate() } )
    
  • null isn’t an object so I cannot define a “to_date()” method for this object.

On request I will send you the code of the Date library. Maybe I will release it, but I needs a LOT of refinement!

Share