Mike Blamires

For a recent project I was completing to shift email into a SQL server I produced the following, it's a bit like re-inventing the wheel but I had my own vision of how it would work and it was a simple enough process.

The Visual C# 2008 project attached builds to class library, it has a few custom exceptions and is pretty simple to use. It's RFC 1969 compliant but it doesn't support MIME attachments.

The project can be found here: http://www.blamires.co.uk/development/POP3Protocol/POP3Protocol-0.1.zip

Today I have started sewing my JQuery hat for a project at work. It really does take all the pane out of working with and manipulating the DOM in some very fancy ways, especially when it comes to cross browser compatibility.

There seem to be a few nuances within it but by enlarge it is comprehensive, very simple to use and very extensible. The one that did take a little getting around was appending to and removing the parent element. For example, I want to dynamically add to add divs to the page and when you hover over the items a 'remove' button appears, until you move off which lets you remove the item from the list.

So I have the following snippet to run when the DOM is complete:

  $(document).ready(
  	function () {
  		$('.element1').hover(
  			function () {
  				$(this).addClass('hover');
  				$(this).append('<p class='removeButtonP'><input type='button' value='x' class='removeButton' id='removeButton'&gt</p>');
  				$('.removeButton').click(
  					function () {
                                                //this event needs to remove the div (.element1) 
  					}
  				)
  			},
  			function () {
  				$('.removeButtonP').remove('p');
  				$(this).removeClass('hover');
			}
  		) 		
  	}
  )	

I would expect the DOM (very representative!) to look like this after we had moved over the first of three divs:

document
 |
 |-html
     |
     |-head
     |-body
         |
         |-[0] div className='element1'
         |-[1] div className='element1'
         |-[2] div className='element1'
             |
             |- p
                 |
                 |- input type='button'

so when the click(function) is called $(this.parent) should refer to element1 but it doesn't, p.parentNode is null so the DOM isn't laid out as you would expect.

To combat this i have modified the code to the below to add a dynamically created id to the div you are hovered over and places this id also in the click() function parameter. The code is commented so I won't go over it here.

 
  $(document).ready(
  	function () {
  		$('.element1').hover(
  			function () {
  				//create a random 'GUID' value
  				var guid = generateGuid();
  				//when we add our remove button as we hover over
  				//we also set the id of the element we are accessing  
  				$(this)[0].id = guid; 
  				$(this).addClass('hover');
  				$(this).append('<p class='removeButtonP'><input type='button' value='x' class='removeButton' id='removeButton'></p>');
  				$('.removeButton').click(
  					function () {
  						//remove the specific element we are hovered over.
  						//remember: as this is nested in .click(function)
  						//$(this) refers to the input element withe the
  						//class .removeButton   											$('#'+guid).remove('div');
  					}
  				)
  			},
  			function () {
  				$('.removeButtonP').remove('p');
  				$(this).removeClass('hover');
			}
  		) 		
  	}
  )	  
  
  
  // with thanks to http://blog.shkedy.com/ for the handy function
  function generateGuid() {
	var result, i, j;
	result = '';
	for(j=0; j<32; j++) {
		if( j == 8 || j == 12|| j == 16|| j == 20)
			result = result + '-';
		i = Math.floor(Math.random()*16).toString(16).toUpperCase();
		result = result + i;
	}
	return result
  }

I hate the phrase Web 2.0, its screams to me "dot com" and implies that somehow the web as we knew/know it was somehow flawed, none the less Javascript has become the lingua franca of the web, and throw mash up a few other technologies and as quoted on the Coding Horror article "Basically, what "Ajax" means is "Javascript now works.""

These days I spend more time developing code users don't see or interact with directly (at least within the UI) and, because of that, I have not really touched any Javascript or browser level technologies for a while. I of course keet up with whats happening I just haven't put finger to keyboard and got my hands dirty since before AJAX emerged and I spent much of my time trying to do what AJAX does with internal frames and painful Javascript. Looking back all I wanted was AJAX and the ability to query remote services I probably just didn't know it.

Recently I have had cause to implement some AJAX technology (delving into SOAP, DHTML & even CSS), Javascript really appears to have grown up and with it the support. Web development at the presentation layer has for me always been frustrating, due to lack of standards, feedback, useful output and no really great way to see what is happening.

This clearly has had to change and I am very pleased to say it has (and bear with me I am behind on this!), firebug really is the cream of the crop for AJAX development. Hell, even if you are not doing any AJAX and just developing a site, it has all you need. Debugging within the browser is a messy affair usually involving alerts, custom error boxes, spurious screen dumps of variables and general vodoo. With firebug for Firefox you can clearly see your HTTP traffic, including all the headers and all the responses & debug your Javascript, watch variables, manage breakpoints, step through code, full DOM explorer etc.

If you are developing Javascript and you are not using it, get it from http://www.getfirebug.com/. If you are using IE7 and still wrestling with the Script Debugger then Microsoft do supply similar tools for IE7 but they are not as complete as firebug.