Hack-A-Porter VI – Return of the meaningful AJAX error message

As our latest hack days approached, rather than the usual panic of biting off more than I could chew and getting everything done in a huge rush, I decided I was just going to fix something that annoyed me. I was also going to miss one of the two hack days as I was off on holiday, so I knew I had to keep the idea small. All that said, the best decision I made was enlisting the help of my venerable colleague Colin Dearing — more on why later.

What was I trying to fix? Well, on the internal application that my team develops, we’ve built some interfaces that use AJAX. We built these interfaces on top of an existing (mostly jQuery based) framework. This gives us certain features for free, but there’s always been one feature it has lacked that bothered me. If the user is logged out due to inactivity, when they then attempt something using AJAX, they get a very unhelpful error message:

Hack Day original error message

And their login status is misleading:

Hack day original login status

Part of the issue is because Catalyst sends a redirect (301) back to the login screen (200) instead of a 401 to indicate the user has been logged out. So, our first change was to adjust Catalyst to return the correct HTTP status code if the user is already logged out when an AJAX request is made:

    $c->flash->{OVERRIDE_STATUS} = '401' if $c->request->uri =~ m{(/ajax|/json|/search-json)};

The second change we made was to the JavaScript, such that it would know what to do with a 401 status:

     }).bind("ajaxError", function(event, XMLHttpRequest, ajaxOptions, thrownError){
         if (XMLHttpRequest.status == 401 ) {
             var dialog = $('<div></div>')

         // a lot more code for the handling dialogue boxes

This alerts the user that they have been logged out, and that they should open another tab to log in again. I was about ready to leave things here as I was off on holiday the next day, but this is where Colin really came into his own. Colin looked at the work we’d already done and thought: “we can make it nicer than this.”

So he changed the new message we displayed into an actual login box:

Hack Day new feedback message

And updated that misleading login status:

Hack Day new login status part one

On successful login, the user’s status is updated and they’re informed that they can close the login box and re-perform their action:

Hack Day new login status part two

Hack Day new feedback message

Of course, I’ve omitted lots of code, such as all the JavaScript to handle both successful and unsuccessful logins from the dialogue box, as well as some of the work done in Catalyst; this just gives you the main outline.

Voila, more meaningful messaging, and the user doesn’t risk losing their work!

Print Friendly

Leave a Reply