Posted
updateWithJSON is a jQuery plugin that updates elements on your page based on key/value pairs in a JSON object. Usage:
$.updateWithJSON(jsonData)
Here's a demo, and here's how it works:
- iterate over each property/value combination in the JSON object
- look for an element in the DOM that matches the property name
- first, look for an element with a matching
id attribute
- if no element with a matching ID is found, look for input, select or textarea elements with a matching
name attribute
- update the value, contents or selection of the matched element(s) based on the value in the JSON object
NOTE: If you have multiple checkboxes with the same
name attribute, or a select that allows multiple values, you'll need to pass the values of the selected items in an array:
{
text_input: 'value1',
checkbox_group: ['value1','value2','value3'],
multi_select: ['value4','value5','value6']
}
If you use a
name attribute like "input[]" on a set of related checkboxes, remember that you'll need to quote it in the JSON object:
{
'input1[]': ['value1','value2','value3']
}
The back story
For a recent project, I needed to update elements on a page based on some server-side calculations. JSON is a handy way to transport data from the server back to the browser, and jQuery's
getJSON() method makes it painless. So, for example, I was getting back
with which I needed to update an element corresponding to "foo" and give it the value "bar". Simple enough; on the page I was dealing with, it was easy to put a unique ID on every element that would need to be updated, and I matched that ID with the property name in the JSON object. It was (almost) as simple as this:
$.each(data,function(name,value) {
$('#'+name).val(value);
}
It's not always the case, though, that you can easily put a unique ID on each element that will need updating; for example,
PHP rewards you if you put the same
name attribute on related checkboxes. Having checkboxes with the same name but different IDs can quickly get confusing when you're dealing with data on the client side and on the server side. The solution above worked in my particular case, but I wanted something that would work more broadly -- say, on pages that had related checkboxes -- and that's how I came up with the plugin.
