geekhut dot org

As I have stated in the past, I hate JavaScript.  It looks messy and feels very sloppy to code.  After relentlessly studying JQuery for the past several weeks I have come to the conclusion that everything in JavaScript is a Hack.

For example :

If you have ever used Wordpress, you are farmilliar with adding “Tags” to posts to help categorize them.  Sometimes while writing a post you have a great idea for a tag, so you scroll down and add it, then continue to write your post without having to wait for the page to reload (delimiting the chance of losing your content).

This is made possible with a methodology of client side scripting called “AJAX”.  Basically it allows you to send information to the server (Asynchronously) so no data is lost - great.

Now with all of the tools available to us developers today such as Scriptaculous and JQuery - this process is still a nightmare.  I am currently working on an shopping cart application for a client and tags must be added to products for indexing and other cool stuff.

Time For a Hack

I create the form and successfully send the post data via ajax, a yellow bar flashes and the new data is appended to the shiny new div. Fortunately this only took me three hours to hack together.

Now the user wants to remove a tag? What if he accidentally misspelled the tag or just doesn’t like it any more.

Time For a Hack

Make a button or link and send the post values once again.  So everything is working great but all of a sudden I can not delete a newly added tag, when I click it - it does nothing.

More Hacking! The new tag was appended to the tags div and I can delete any other pre-existing tags but this new tag just will not go away.

Unfortunately this type of issue is difficult to find any help for considering the fact that you can’t type “appended button will not delete” in Google and expect any decent results.

I am going to smash my face against my keyboard for a couple more hours …or just start drinking.

Oh heres the code that took me 7 hours to write, it still doesn’t work properly…

$(function() {

	$("#tagForm").submit(function(){
		var product_id;
		var tag;
		product_id = $("input[@name=product_id]").val();
		tag = $("input[@name=tag]").val();

		$.post("/products/addtag",{
			product_id: product_id,
			tag: tag,
		},
		function(post) {
			$('#tags').highlightFade('lightyellow');
			$('#tags').append("  "+tag+" ");
		});
		return false;
	});

	$('#tags > a').click(function() {
		$(this).fadeOut('slow');
		$.post("/products/deletetag",{
			tag_id: (this.id),
		});
		return false;
	});

})