Topic: How do I code Javascript unobstru..unostrub...unobs..uno..u n o b t r u s i v e l y

Hi guys,
I've recently after having coded for a while have started getting on the bandwagon of unobtrusive javascripting as it seems cleaner and really hassle free to have your javascript separate from your html and php code. I've read up on it in some articles like this one:

http://www.onlinetools.org/articles/unobtrusivejavascript/

However I'm at a standstill with respect to actually implementing it as how I need it. Like let me show you what I mean.

Lets say I'm creating an address book - Php MySQL AJaxified. I normally create the individual rows in a for loop for each entry I retrieve form teh db as so:

string = '';
for($i=0;$i<$rs;$i++)
	string .= _createRow($rs[$i]);


function _createRow($data)
{
	$xhtml = '<div id="rowid'.$data['id'].'" >'.$data['name'].' - Contact Details:'.$data['contact'].'</div>';
	$xhtml .= '<a href="#" onclick="deleteContact('.$data['id'].')">delete</a>';
	return $xhtml;
}

Now from what I know in unobstrusive javascripting you assign functions to dom elements on page load instead of populating each and every required html item with onclick and onload handlers. This seems ok but when your contentitself is dynamic like in teh example above in a page being created by a php script where likewise you would be passing variables tofunctions based upon teh element you interact with. How do you implement it unobtrusively. I.e in the example above the deleteContact javascript function is programmatically added to the anchor link with the contact id being passed in as a variable.

If I were to code javascript unobtrusively how woudl I be able to handle this kind of situation where I need to like pass numerous variables of sometimes differing natures to JS functions. Any help would be appreciated - I really would like to start coding the RIGHT WAY!

Indeed, Chris Heilmann really knows his thing about unobstrive JavaScript and accessibility. And he's a cool guy too.

Web pages/applications should NOT require JavaScript in order to work. Regarding your very example, you should remove the onclick event from the markup and make a simple REST API to delete the contacts, e.g: /contact/<contactId>/delete to delete the contact <contactId>, and change your _createRow method as seen below

function _createRow($data)
{
	$xhtml = '<div id="rowid'.$data['id'].'" >'.$data['name'].' - Contact Details:'.$data['contact'].'</div>';
	$xhtml .= '<a href="/contact/'.$data['id'].'/delete">delete</a>';
	return $xhtml;
}

When the load event of the page kicks in, look for the links using your REST API and AJAXify them at will.


Note that your markup itself looks a bit rough. Surely there is a more semantic way to mark this up.

Hope that helps,



(Edited by poi on 07-02-2008 11:36)

Well thats what gotten me stumped. I mean when teh onload event runs how do I like attach a delete function to teh onclick handler passing it the appropriate values according to the rowset.

Btw whats a REST API...sorry if I sound too much like a noob . I've been programming the WRONG way for a while now...

REST stands for Representational State Transfer. It basically describes a way to access/touch ressource via a (meaninful) URI, a verb ( the HTTP Method, e.g.: GET, POST, DELETE, ... ) and a Content-type. See A brief introduction to REST, REST for the rest of us and How I explained REST to my wife for further explainations.

How to attach the delete function ? just add a click event listener on the first common parent* of the delete links. When your callback function is fired, bubble up until you meet said common parent or an A tag, in which case you look at the href and cancel the event and do the AJAX magic if it matches a pattern of your REST API.


* this is event delegation, and saves you to attach the event listener on each and every item.


Is it a bit more clear ?



(Edited by poi on 07-02-2008 13:36)

Wait you mean that inorder to get this to work my delete function would have to parse through the object its attached to and retrieve information from its attributes via some kind of pattern matching scheme...is that uh.. safe? COnsidering that a user might be able to change the attributes of teh A tag using firebug...etc.

Mind you that pattern matching scheme does not necessarily mean RegExp. It can be more trivial/hardcoded than this.

FireBug does not change the deal. It's always been possible to modify a page, call a function, change some arguments, do whatever you want with a page. Nothing new under the sun. You know with the code the pasted in your first post, nothing forbids anyone from typing the following in their address bar : javascript:for(var i=0;i<100000;i++)deleteContact(1);void(0);. We all know that the client can be abused in one way or another, and any request / user input sent to the server must be verified / sanitized

hmmmm.... got a point there - are there any easy to follow examples around which could get me jump started.. examples which tackel normally encountered situations.