Internet Explorer Developer Toolbar Formatting Javascript

I’ve seen screens like this all the time:

Jumbles of javascript spewd out by the ASP.NET AJAX and the like. However I’ve just noticed this very handy toolbar menu option:

Which produces formatted code like this:

I wish I had found that months and months ago!!

Displaying ‘Unsaved Changes’ message for a web page using jQuery

I had a need to allow a user to cancel navigation to another page if changes to a form had not yet been saved – especially if they attempted to navigate to another page from the ever present menu. The code I used has a slight ‘hack’ which involves using the propertychange DOM event in IE rather than the change event which I would have usually expected.

Here’s the code that sets a global flag to indicate there’s an unsaved change :

var _changesMade = false;
$(document).ready(function() {

   $('form').bind($.browser.msie ? 'propertychange' : 'change', function() {
       _changesMade = true;
   });

   $(window).bind('beforeunload', function() {
       if (_changesMade)
           return 'There are unsaved changes which will be lost if you continue.';
   });
});

There are a couple of caveats. Any button that actually does the save will need a OnClientClick that sets the _changesMade to false to prevent the message from being displayed :

<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="button" OnClick="btnSubmit_Click" 
    OnClientClick="_changesMade=false; return true;" /> 

Also, if you have any code that causes the change event to fire (DOM manipulation after an Ajax call) then you might have to save the state of the _changesMade flag, make the DOM changes then reset the flag to it’s original value.

Blog Post Icons

Have you ever wondered what those strange icons were that appeared next to blog posts such as the example on the right? Well it’s called an Identicon and it’s an icon that uniquely identifies the source of a post whilst maintaining the privacy of the user – technically it’s a MD5 hash of the users IP address and converted to a 9-block graphic.

But wait, there’s more. If you’d like a specific icon (a picture of you for example) to follow you around wherever you post then you can sign up for a Gravatar – a globally recognized avatar.