jQuery “Populate” plugin
Populate a form or an element's child elements using a JSON object.
Posted on Tuesday, February 12th, 2008 at 12:37 pm
I don’t like mixing HTML and PHP when I build my forms. Instead I like to keep my HTML completely clean, then if a form needs to be pre-filled (for example retrieving a bunch of database results), get JavaScript to fill it in for me after the page has loaded.
This plugin supports full PHP naming and deep data structures, as well as checkbox arrays and other non-standard UI controls. The plugin can be used as part of your AJAX toolkit, or for separating server-side code from HTML by populating a form after the page has loaded eg:
$('form').populate({text:'text', radio:1})
and not inline as the page is processed, such as:
<input type="text" name="text" id="text" value="<?php echo $text; ?>" /> <input type="radio" name="radio" id="radio-1" checked="<?php echo $val == 1; ?>" /> <input type="radio" name="radio" id="radio-2" checked="<?php echo $val == 2; ?>" />
You can also populate non-form controls such as <div>s, by specifiying the id and an identifying attribute (defaults to id):
$('div').populate({'text-1':'text', 'text-2':'More text'})
This can be useful when you want to show the results of a database call, but don’t want the text to be editable.
Instructions and demos
I’ve now FINALLY put up a full set of instructions and a working demo, with examples of:
- Populating a simple form, using string variable types for textfields, radiobuttons, dropdowns and checkboxes
- Populating a complex form, using array variable types for checkbox arrays and multi-list boxes
- Populating a hierarchical form, using hierarchical JSON data
View the jQuery Populate Demo here.
Download
JavaScript
PHP
Hi
It’s possible put one example complete for this plugin on your site, or demo ??
David.
Hi David,
Sure. Am in deadline hell right now though, so might take a week or so.
If you just download the files, though, you should have everything you need to get started.
Hi Dave,
I try the plugin jquery.populate and for me not work.
I have:
jQuery(document).ready(function($) {
$('div.example').populate({'text-1':'text', 'text-2':'More text'})
})
but not work?
Why?
Hi Dave,
I try the plugin jquery.populate and for me not work.
I have:
jQuery(document).ready(function($) {
$(’div.example’).populate({’text-1′:’text’, ‘text-2′:’More text’})
})
but not work?
Why?
Hi again David.
I designed populate to be used with forms mainly, and the div stuff was an afterthought.
However, it looks as if something is up, but I’ll get onto soon, and hopefully I’ll have something up and working in the next week or so.
Hi Dave,
Any luck getting the demo up sometime soonish ?
Cheers,
Vipul
Funny you should mention that - I’m doing the demo now! Check back later today or perhaps tomorrow…
jquery form populate does not populate checkboxes and radio buttons in safari.
Also it would be cool to recognize max length on fields that are array and apply a value between them. For example if you have a json data like {”phone”:”3105551212″} and there were 3 fields like phone[0],phone[1],phone[2] it would split the phone up based off each fields max length
Damn… whadya know. I’ll look into it when I get a moment. Thanks for flagging it
Dave, a bug report from me. The populate doesnt work with *radio and combo boxes* in Safari for Mac. I don’t know if the status of this bug with Safari for Windows. And Populate works perfectly with Firefox and Opera.
OK
thanks guys for reporting the safari bug! Strange that it made it so far without being detected. I’m pretty good at testing on the major browsers so surprised that this made it through, especially after ALL this time!
Anyway - bug fixed. It was due to safari not implementing the item() method on collection elements.
Thanks again,
Dave