outbreak/blog

I’m working on a few projects with jQuery that need event handling. Since I like the way event handling is done in jQuery, I decided to use it to add event handling to internal objects with jQuery (1.2.6 at the time of writing). This seems very easy:

internalObject = {/* code here */};
eventHandler = $(internalObject);

This means that you could now do

eventHandler.bind('customEvent', function (ev) {
	// this is a reference to internalObject
});

and of course also

eventHandler.trigger('customEvent', {some: 'data'});

which is great.

But in a part of my code this just wouldn’t work. Unfortunately it was my first try at doing jQuery({/* custom object */}) and since I obviously wasn’t at my best when writing it I was sure this couldn’t be done. So I hacked around it.

A few weeks ago I made me a test case and figured out it works when passed an empty object ({}). So I implemented it everywhere and sure enough a part of the code stopped working. Which made me delve into the code to figure out why - a bit of debugging made me think the bug was somewhere in jQuery and I found out that there is a problem with the makeArray function. When it’s trying to create an Array it will test if the object has a length property. But as the comment in uncompressed code neatly points out //the window, strings and functions also have ‘length’ it checks a few things that allows it to handle these objects differently.

This means that

eventHandler = $({});

will work normally, while

eventHandler = $({length:0});

won’t because eventHandler length will be 0.

My problem was that the object I was passing had a length property. As such it got sucked into the else that processes arrays and other array like objects (like arguments and most probably also NodeLists). This meant that what I got back was nothing since length was initially set at 0.

It’s the end of a year, a year of change for me.

I managed to finish my thesis so I’m finally and officially Bsc of economics/business. My thesis talks about motivation of IT developers, an interesting subject for me and I learned a lot in the process of writing it. I hope to work more on this topic in the following years, especially with companies which have problems motivating people or just want to know how to motivate their employees better. We’ll see how it goes…

The other big change this year is that I switched jobs. After 8 years of working at a digital agency called Parsek I moved to a start-up called Zemanta. The responsibilities are quite different as at Parsek we worked for clients who sometimes made us do things that are not the best for end users (I know they meant good though). At Zemanta the team is smaller but the client base is much bigger as we have to cater directly to end users.

I’ve also won the Slovenian Young Interactive Entrepreneur award so I was a finalist for the International award and went on a tour of England’s digital industry in November. I didn’t win the award but it was a great tour with great contestants that I intend to keep in touch with.

A new start

In the new year I have a lot to do. A lot of the projects I was working on in 2008 are still running in 2009, I also hope to launch a new project this year. This means no rest for me - the first weeks of the new year are going to be hard work full time.

As posting in the previous months was quite slow I already have a set of things I want to write about in the new year so you can prepare for more reading in the near future.

I don’t want to go into details of my plans for the new year as it’s time to go celebrate - I’ll think and plan tomorrow.

This is why there’s a crisis going on.

In Bakersfield, California, a Mexican strawberry picker with an income of $14,000 and no English was lent every penny he needed to buy a house for $720,000.The End

Via markos.

Image via Wikipedia

I find this so utterly amazing even though people here tell me it’s not that hard to do. You can now search CCed Flickr photos by colour - this might probably be the easiest way to get to photos to use on mock-ups, much better than search where you have to rely on people tagging photos correctly. The urls are even bookmarkable, which means you I can give you a link to the colours used on this blog: About, Blog, Projects. You can even specify more colours (via had@koornk).

I wanted to share a bit on how the window.name transport plugin for jQuery works, so developers in the crowd can find their way around the code and that you can understand what is going on and where can it break.

How it works

The plugin hijacks the $.ajax function and will do its magic when you’re POSTing to a foreign (domain not same as domain of document) domain or you specify settings.windowname to force it. If these conditions are not met it will use the default ajax function to create the request.

The script first creates an iframe that will be the target of its request. If the request is of type GET it will open the location with the specified data as querystring in the iframe, if it’s a POST request it will first create a form with hidden fields that represent all data being sent. To allow sending of method, target, action and submit some magic is done (those override some important form object stuff) after which the form is posted to the iframe. This is readyState 2.

After the posted file is loaded (meaning it should have now set the window.name) an onload event is fired that loads an empty local file into the iframe. The empty local (same domain as the page) file can be set in the settings (settings.localfile) - if it isn’t the script will first try loading /robots.txt and /crossdomain.xml (two files commonly found in the root that are small) and if both fail it will load the page it’s on. All this is done only on IE where 404 doesn’t count as local. This is readyState 3.

When the local file is loaded and it is surely local we can read the text from the window.name. If it’s a string and it isn’t our default we set status to 200 and set the string as responseText, otherwise we set a 502 status. We can now cleanup which means removing the form, the iframe and all references we created in the global space.

The whole thing is written in such a manner that it will return a fully qualified XMLHttpRequest object with all methods and properties. You can abort the request and it will cancel loading and clean up, you can access readyState, responseText and everything else you’d do to an XHR object. It does however not implement features that cannot be used due to the fact that it’s an ordinary form submit - setting headers and such.

Interesting use

I’ve found that window.name transport is ideal for saving files - you can force the window.name transport to a url that will return a file with an Content-disposition: attachment; header. When the file loads you’ll get a popup to save it and the frame will disappear automatically. It’s even more convenient if you’re creating the file with a POST request.

Download

You can download the plugin here or you can go to the jQuery plugins page to get it

Related articles by Zemanta

• Cross-Site XMLHttpRequest in Firefox 3
• Updates for AJAX in IE8 Beta 2
• State of Ajax at Google I/O: Performance, Performance, Performance

Image by Phillie Casablanca via Flickr

After a week of mostly testing and fine-tuning the code I finally released the windowName transport plugin for jQuery. You can get the plugin here but I suggest you first check the plugin page.

I need help testing

If you have an obscure browser / OS combination that is supported by jQuery I urge you to test the plugin. There are no good test pages yet so my temporary test page will have to do. The test page POSTs the querystring passed to it to a nonlocal domain and should open a JavaScript alert with the same querystring plus php=true.

On a sidenote - I figured out that the page looks better without the background images. So I changed the theme - let me know what you think.

Related articles by Zemanta

• Microsoft Gets a Clue, Adopts jQuery