jQuery has many kick-ass javascript utilities. Among these is a method (jQuery.getJSON()) that parses JSON that you grab from a remote source and gives it back to you as a JSON object. Excellent!

Surprisingly though, jQuery (as of 1.3, to my knowledge anyway) does not make any functions available to allow you to securely parse a simple text string into JSON. Not sure why this is so, especially since they must do it behind the scenes for the getJSON() method, but so be it.

I needed this functionality, though, so I could pass some data from one of my templates to a jQuery function I’m working on.

Fortunately, even though jQuery doesn’t have built-in functionality for this, it was relatively trivial to wrap the open source JSON parsing and stringifying library published by JSON.org in an easy-to-use jQuery plugin.

So that’s what I did. I changed nothing of the JSON parsing library implementation published by JSON.org; I just wrapped two jQuery methods around it, as follows:

;(function($) {
    if (!this.JSON) {
        var JSON = {};
    }
    /* ... implementation of parse() and stringify() here ... */
    $.toJSON = function(text, reviver) {
        if (typeof reviver == "undefined") {
            reviver = null;
        }
        return JSON.parse(text, reviver);
    };
    $.jSONToString = function(value, replacer, space) {
        if (typeof replacer == "undefined") {
            replacer = null;
        }
        if (typeof space == "undefined") {
            space = null;
        }
        return JSON.stringify(value, replacer, space);
    };

})(jQuery);

Pretty convenient. Now I can securely parse and decode JSON to my heart’s content.

Here’s the source code of the full jQuery JSON plugin, if you’re interested. Note that I have not extensively tested the plugin, but since I did not actually touch any part of the JSON parsing library it’s based on (save for creating a local scope for the JSON variable), I wouldn’t foresee any issues.

Here’s a bit more information about the library the plugin is based on.

I was working on a form design recently in which I wanted the corresponding labels to disappear whenever text was entered into an input field.

This was easy enough to accomplish via jQuery, but I quickly hit a snag. I had assigned an event listener to the “change” event, but it turns out that the change event only gets fired when a user actively focuses on a field, inputs text, and then blurs. If a script — such as Google AutoFill — updates a value in a field on its own, the change event is unaware of it.

I poked around on Google a bit, and as far as I can tell, there doesn’t really seem to be an easy answer for this. So to make it work, I decided to write a quick jQuery plugin to handle the job.

I realized fortunately that rather than reinvent the wheel, all I need to do was find a way to listen for changes to input fields and then fire the change event manually if they were altered outside of the usual focus/blur routine (i.e. by a script).

Here’s the plugin code I came up with:

(function($) {
    $.fn.listenForChange = function(options) {
        settings = $.extend({
            interval: 200 // in microseconds
        }, options);

        var jquery_object = this;
        var current_focus = null;

        jquery_object.filter(":input").add(":input", jquery_object).focus( function() {
            current_focus = this;
        }).blur( function() {
            current_focus = null;
        });

        setInterval(function() {
            // allow
            jquery_object.filter(":input").add(":input", jquery_object).each(function() {
                // set data cache on element to input value if not yet set
                if ($(this).data('change_listener') == undefined) {
                    $(this).data('change_listener', $(this).val());
                    return;
                }
                // return if the value matches the cache
                if ($(this).data('change_listener') == $(this).val()) {
                    return;
                }
                // ignore if element is in focus (since change event will fire on blur)
                if (this == current_focus) {
                    return;
                }
                // if we make it here, manually fire the change event and set the new value
                $(this).trigger('change');
                $(this).data('change_listener', $(this).val());
            });
        }, settings.interval);
        return this;
    };
})(jQuery);

The plugin makes use of the trigger() and data() functions. In a nutshell, we loop over the input element or set of children input elements, storing their initial value in the data cache provided by the data() function. We then check to see if the stored value matches the value of the input during the current iteration. If so, we do nothing, if not, we manually fire the change event via trigger().

There’s also a bit of logic in there to ignore the element that has focus. We don’t need to worry about this element, since if the value is changed while the user has focus, the change event will be fired as normal when the element is blurred.

That’s all there is to it. To use the plugin, you simply call listenForChange() on the form or input you want to listen on, e.g.:

$("form").listenForChange();

You can then assign whatever functions you want triggered to the change event as normal, and they’ll be fired regardless of whether the user types them or they are updated via a script.

I’ve tested this on Firefox with Google AutoFill and Safari’s built-in AutoFill, and it seems to work on both. I haven’t tested it on fields injected after page load, but presumably it would work for these as well.

Google just launched a new feature as part of its geolocation services: a Reverse Geocoding feature as part of the Google Maps API.

The API is really simple to use. It took me only a few hours to put together a quick little utility called Address on the Spot, which allows you to double click anywhere on a map to find an address for a location.

So here’s a quick how to for using the Reverse Geocoding API.

First, create a GLatLng object with a set of geocoordinates:

point = new GLatLng(45.523875, -122.670399);

Next, create a GClientGeocoder object and pass the point object to it, along with a callback function. The callback function display_address() will be executed when the geocoder returns a response.

geocoder = new GClientGeocoder();
geocoder.getLocations(point, display_address);

Here’s what display_address() might look like:

function display_address(response) {
    var address;
    if (!response || response.Status.code != 200) {
        address = "No location data found."
    } else {
        address = response.Placemark[0].address;
    }
    alert(address);
}

Couldn’t be easier. It’s definitely a handy addition to the Google Maps API, and this utility was pretty fun and easy to build.