xmanoel@

jQuery & I

I am by no means a web developer. The few stuff I have worked on that can be accesed through a web browser are mostly intranet applications. That usually ugly applications with overcrowded forms, that are made specifically with one web browser in mind: Internet Explorer 6 (Yep, Corporate computing is usually that sad: IE6 is still the only considered option).

That was ugly, but working with one specific browser in mind is somehow easy. One of the things I fear the most about Web development is the testing process: Testing the page with different (and quite often incompatible) browsers? Please not. [I have to admit about this, that I asume that expert web developers already know all glitches on each browser and have plenty of tricks. Me, by avoiding like hell this kind of work has keep me from learning those tricks. So it makes me also more vulnerable to issues in this kind of developments.]

Did you like the introduction? Well, for once I will go to the point: So this time I had to develop a web application and customer was mumbling something about AJAX: that meant JavaScript, and I didn't like to have problems with browser incompatibilities. Thus, I considered to use a JavaScript framework(library or whatever you feel calling it). My thougths were: let's use some well tested funcions instead waste time trying to find out why everything is working the wrong way at Internet Explorer(Sorry, Redmont guys, that's usually my -bad- experience). There were at least a few choices for that: jQuery,MooTools & Dojo. It was hard to choose: on the Web 2.0 times there were loads of comparatives trying to prove which one was the best... Just reading them was wasting too much of my time.

So I just went for jQuery with no reason. Seemed to work fine, it had a certain hype (usually this would be a reason to leave it out, but I was too much in a hurry) and had plenty of plugins. Ok, just forget all the previous bullshit, from now on this is about jQuery.

Question: How do I feel about jQuery after using it? Well, I still find it a very bizarre programming paradignm, but on the other side I started to like it. In fact I would see it as really adecuate to allow people to learn on programming web pages: It's very easy. (Though a very bad language to teach programming, IMHO). Did I finally avoided writting browser-dependent code? For the most of it yes, but unfortunately I found incompatibilities with Internet Explorer (yep, it did it again).

Both problems were solved by me creating a convenience function that will made AJAX requests. I know this could be done by other means, but I definitely liked the simplicity of jQuery's getJSON() (one function, 3 parameters, that's neat). So I created my own getJSONFix():


// This is a convenience funcion to solve an issue we have found
// when sending back data that contains international characters (e.g.: Ñ)
// We recomend to use this funciont instead of the $.getJSON() from   jQuery	
getJSONfix(url, data, callback) 
    {	
	// Data is send to the server as POST
    // the encoding is set as UTF-8
    // to fix problems with international characters
	$.ajax ({  url: url, 
	           scriptCharset: "utf-8" , 
		       contentType: "application/x-www-form-urlencoded; charset=utf-8",
		       type: "POST",
		       dataType: "json",
			   data: (data), 
		       success: callback
	        });
	},

As I mention before this solves my two problems in one shot: all AJAX communication is done using POST (thus, avoiding the cache problem in Internet Explorer), and also data is send with the charset specified 'utf-8' (because jQuery works internally with that encoding, then I just stuck with it).

My other issue with jQuery:

In jQuery everything is a jQuery object: $, $(), $("tag"), $("#id"). But sometimes this object is kind of an array, and sometimes this object is just an individual object (the second parameter of an $().each() method call). Well, this is hard toe explain.

So I wanted to make a funcion that could handle both the result of $("") query, as well as the one comming from $().each(). But there was no easy way to differenciate one from the other. No method or utility to find out... But I came out with a bizarre option: since one has a .length and the other doesn't, let's use exception handling in a very liberal way:


markAsError(field)
{
		try 
		{
			field.each(function(i,_field) {
				           utils.markAsError(_field); 
				       });
		}
		catch (e) {}
		
		var cssClass = field.className;
		if ( cssClass != null && 
		     (! /.*_error$/.test(cssClass)) )
		{
			$(field).removeClass(cssClass);
			$(field).addClass(cssClass + "_error");
		}
}

I don't know if this is the mostk aakward solution ever, of if it a bad option. Please feel free to comment and suggest me if I am doing wrong. Or feel free to reuse my solution for your own code.

Specially dedicated to smart asses: my two funcions are not used as they are written in here, I just modified them a little bit to be easier to understand.

01 March 2010