Getting a single AJAX loading progress indicator into your web application can be a relatively straightforward task thanks to a simple piece of Javascript from Thomas Fuchs:

// lang javascript
Ajax.Responders.register({
onCreate: function() {
 if($('busy') && Ajax.activeRequestCount>0)
 Effect.Appear('busy',{duration:0.5,queue:'end'});
},

onComplete: function() {
 if($('busy') && Ajax.activeRequestCount==0)
 Effect.Fade('busy',{duration:0.5,queue:'end'});
}
});

However, from what I could tell (and subsequently experienced) is that by using this code, you are limited to only one progress indicator per page. This caused me problems, as on my Archives page I have a progress indicator for when the application is fetching monthly archives, but also for the live search function that appears on every page. Whenever I activated an AJAX request by using either function, both the loading indicators would be displayed, thus confusing the user.

So, how is it possible to get around this? Well, from what I can see it’s impossible to pass the ID of a loading indicator into Thomas’ script. The trick is to move the hiding and displaying of the indicators into function calls for the “onComplete” and “onCreate” events within your specific AJAX request:

// lang javascript
function getMonthResults(vars)
{
  var url = 'archives_month.php';
  var pars = 'm=' + vars;
  var target = 'monthResults';
  var myAjax = new Ajax.Updater(target, url, {
asynchronous:true,
onCreate: function() { showLoader('mArchive_loader'); },
onComplete: function() { hideLoader('mArchive_loader'); },
parameters: pars,
method: 'get'
  });
  var element = document.getElementById(target);
}

The two events now call separate functions that pass the ID of the loading indicator, allowing you to define which indicator to hide or display:

// lang javascript
function showLoader(loader)
{
   new Effect.Appear($(loader), {duration: 0.5});
}

function hideLoader(loader)
{
   new Effect.Fade($(loader), {duration: 0.5});
}

Simple as that. Now, I’m not saying that this is the “offical” or “ideal” way of going about this task, but it’s the one that worked for me. You can also extend the show and hide functions, to add an effect to your target container by passing the target as well as the loader to the function. For example, I have used the following as my show and hide functions:

// lang javascript
function loadingRequest(loader, target)
{
   new Effect.Appear($(loader), {duration: 0.5});
   $(target).style.display = "none";
}

function completedRequest(loader, target)
{
   new Effect.Fade($(loader), {duration: 0.5});
   new Effect.BlindDown($(target));
}

This means that when the AJAX request has completed, the results will slide into view using the “BlindDown” effect from the Scriptaculous library. A nice added extra.

Technorati Tags: AJAX, Javascript

Snippets

Before using TextMate I’d switched and swapped which editor I used regularly. Sometimes I’d settle for the bloated features of an IDE like Zend Studio, and other times just shoot for something simple and fast like Mac OS X’s TextEdit. I never really found the balance, and like most people I have spoken to, they and I found BBEdit to be too old (and too ugly) for any real productive use.

So why does TextMate appeal so much? I guess it’s attention to detail, and the developers ability to prioritize what features the user really wants. It includes all the basics you would expect of your average editor, code highlighting, auto indentation, some level of auto completion etc etc. However, it also adds to these, by including features like snippets, code block collapsing and a project file browser. These are features that won’t make the software bloated, but go a long way for increasing your productivity and appreciation of the simple added extras.

My favorite of the three features I mentioned above is snippets. This is one of TextMate’s features that I took some time to really get used to. I’m one of those people who tends to retype code over and over again, just because I don’t want remove my fingers from the keyboard to select and copy a block of code. Snippets allows me to assign a keyword to code that I regularly have to retype, then all I need to do is type this keyword and hit tab. The code magically appears and even lets you tab between input locations within it. This has been an amazing time saver, TextMate already has hundreds of snippets pre-bundled.

I’m also amazed by the rate and amount of updates that come out for the software. I subscribe to the bleeding edge releases, so I receive all the unofficial builds. Even so, I’ve found all the releases so far to be perfectly stable, and allow me to take advantage of features before their official release. TextMate includes it’s own auto-update feature, which is easily the best that I’ve seen. I hate auto updates, they’re annoying and always get in the way. TextMate’s is quite the opposite however, updates download quickly and unobtrusively, and everything is automated. It even removes your old copy, copies itself over to you applications directory and then restarts. This all happens in less that 15 seconds for me. Perfect.

What’s Missing?

TextMate does have a couple of features missing that I would really like to see included. CVS or Subversion support would be a great bonus, that would cut my checking in time down dramatically. Also, auto completion of code would be great for all the PHP work I do. This is lesser of a wish however, as I’m finding that I memorize far more functions by having to remember them and not rely on the prompt window to back me up! I’m sure that these features will come, but again they are lower down on the priority list as they are not so important for the masses.

If you are a Mac user and find BBEdit ugly and slow, give TextMate a shot. It has a free trial and is cheap (around €39). I paid for a license within the first week of using it, it’s that good. They also just redesigned their website which now looks very polished compared with the old one. I’m looking forward to continued updates, and with version 1.5 just released, I’ve got a whole bunch of new features to test out!

Technorati Tags: text editors, textmate

It turns out however, that trying to run WordPress 1.5 and 2.0 on the same server was not a good idea.

I wanted to put the new site up into a sub folder, and import all of my WP 1.5 content. Long story, but it ended up mixing up my databases, WP 1.5 went down, and here we are with 2.0.

I’ll be tweaking lot’s of different areas over the next few days, most notably Internet Explorer 6 support, which being on a Mac over the xmas period has proved difficult to test so far. Adding a comment right now may prove to be difficult/impossible as I’m using position:fixed…

I’m also finishing up the contact form, comment previewing and tag archives, all which need a little AJAX love.

So, in true 37 Signals style, here it is, the rest will come later.