CYCLOMEDIA

While working on the Chan Reference pages I needed the ability to quickly put together HTML/ASPX example text, and because it needs to go into the web site it needs to be HTML escaped. A quick google for online javascript HTML encoders/decoders turned up nothing too useful so I knocked together my own, and here it is for everyone to enjoy:

One of the classic Javascript stumbling blocks is closures, and I won't be rambling on here about how or why they work like they do. You'll have run into problems with closures if you ever tried to dynamically add functions to a bunch of controls in a loop. For example

var t = document.getElementById('MyTable');
for( var i = 0 ; i < t.rows.length ; i++ )
{
	var r = t.rows[i];
	r.onclick = function(){ MyFunction(i); };
}

function MyFunction( i )
{
	alert( i );
}
	

This traditional method of getting a function pointer into an event handler, whilst simpler than some freaky eval-based systems will still alert the value of t.rows.length no matter which row is clicked on!

To fix that you could end up doing things like this:

r.onclick = (function(i2){ return function(){ MyFunction(i2); } } )(i);
	

…before locking yourself in a padded room at the prospect of not only having assignments like that throughout your code but having to maintain and debug it. So instead of creating function references from closures within functions I knocked together four functions to do it all for me.

function f_ptr( f , a , b , c , d , e )
{
	return function( ){ f( a , b , c , d , e ); };	
}

function f_ptr_rtn( f , a , b , c , d , e )
{
	return function( ){ return f( a , b , c , d , e ); };	
}

function f_ptr_evt( f , a , b , c , d , e )
{
	return function( event ){ f( event || window.event , a , b , c , d , e ); };	
}

function f_ptr_evt_rtn( f , a , b , c , d , e )
{
	return function( event ){ return f( event || window.event , a , b , c , d , e ); };	
}
	

Each has their own uses but they all take the same parameters, the first being the function to reference and then up to five parameters to pass down, all of which will be preserved at the time of assignment. Of the four the first is simplest and can be used directly in our original scenario. Note that the target function name is NOT in quotes, but is a direct reference:

var t = document.getElementById('MyTable');
for( var i = 0 ; i < t.rows.length ; i++ )
{
	var r = t.rows[i];
	r.onclick = f_ptr( MyFunction ,  i );
}
	

The next function returns the result of the target function - handy for onclicks or onsubmits that might want to return true or false to halt operation:

SubmitButton.onclick = f_ptr_rtn( IsFormValid , 'cheese' );
	

The next captures the event, handy for keypresses and suchlike:

Textbox.onkeypress = f_ptr_evt( HandleKeyPress , 'alpha' );
	

And the final combines the previous two, here's how to make a texbox only allow digits to be entered:

txtNumberBox.onkeypress = f_ptr_evt_rtn( HandleKeyPress , 'int' );
		
…
		
function HandleKeyPress( e , t )
{
	if( t == 'int' )
	{
		var c = ( e.which != null ? E.which : e.keyCode );  //cross-browser jiggery pokery
		return( c < 32 || (c > 47 && c < 58) );             //either a control code or 0-9 
	}

	return true;
}

	

As you can see the _evt functions will capture both IE and sensible browsers' events when calling the target function but you will still need to handle the other inconsistencies yourself. One handy site for deciphering the mess of browser keyboard and mouse events is Javascript Madness.

Version 1.0.0 of the AJAX Function Library is out and can be found at /ajax/.

This replaces the old Simple / Basic AJAX Framework [DEAD LINK] but can be used in much the same way. It uses a cleaner approach and has built in extensibility for a different project i have up my sleeve :-)

Anyway there are a handful of examples [DEAD LINK] which you can view the source of including replacing an image, parsing a JSON object into a form and loading a DIV with innerHTML. All done in just a few lines of code.

V1.0.0 weighs in at about 5k and a good chunk of that is comments and the copyright notice / license and like my 2d array library doesnt go overboard with prototyping and inheritance.

A simple example from the manual [DEAD LINK]:

function myCallBack( responseString , statusCode , errorString )
{
	if( statusCode == ajax_status_ok )
	{
		alert( responseString );
	}
	else
	{
		alert( errorString );
	}
}

function go()
{
	//( callback , sURL , sPOST , errorString )
	ajax_RequestString( myCallBack , "myscript.php" , "" , "The request failed" )
}

...

<input type="button" onclick="go()" value="Make Request">