EditableSet is a jQuery edit-in-place plugin for editing entire sets of data at once.
EditableSet was designed for Ruby on Rails apps, but it will work with any web application.* When activated, it wraps the target object's inner html with a form, converts all spans with the attribute "data-name" to inputs, then appends "Submit" and "Cancel" buttons. Pressing the "Save" button will submit the form via ajax (PUT). Originally based on and inspired by Mika Tuupola’s Jeditable.
You can play with a sample at http://editable-set.heroku.com.
* The default repopulation script will only work if the "data-name" attributes follow Rails' "name" attribute conventions. This feature can be overridden.
Requires jQuery 1.4.1 or newer.
A modern browser (Tested in Firefox 3.6+, Safari 5+, Chrome 5+, and IE 8+).
EditableSet is applied to an element that contains a collection of spans that utilize the HTML5 data-* attribute. The individual span's attributes define the generated input field.
A 'text' input is the default:
<span data-name="applicant[address_attributes][city]" class="required">Portland</span>
Generates:
<input type="text" name="customer[address_attributes][city]" value="Portland" class="required" />
Note: All standard attributes will also apply to the input.
Select menus and radio buttons can take a special options
attribute containing a single or two dimensional array:
<span data-name="customer[hair_color]" data-options='[["Brown", "brown"], ["Blonde", "blonde"], ["Red", "red"]]'>Brown</span>
Generates:
<select name="customer[hair_color]">
<option value="brown" selected="selected">Brown</option>
<option value="blonde">Blonde</option>
<option value="red">Red</option>
</select>
At its most basic level you can just call:
$('.editable').editableSet(); // .editable being the element containing the named spans
Of course, chances are you will want to define a form action and various other options:
$('.editable').editableSet({
action: '/customer/1',
dataType: 'json',
afterSave: function() {
alert( 'Saved Successfully!' );
}
});
For more examples and information about features/callbacks please check out the Wiki.
Text, Email, Url, Number, Range, Textarea, Checkbox, Select, Radio
- Convert docs to jsdoc
- Test in more browsers
- Test the shortcut key combos
- Test the addInputType() method
- Rethink the globalSave option
- Change default datatype to 'json' rather than 'script'
- Look at using the form conversion in html5 for future versions
- Make 'rel' attribute an option, require it to be turned on
- Update data-* retrieval with jQuery's new data() method when it becomes available
I have no immediate plans to support older browsers than those listed above.
- Fork the project.
- Make your feature addition or bug fix.
- Add tests for it. This is important so I don't break it in a future version unintentionally.
- Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
- Send me a pull request. Bonus points for topic branches.
Matthew Willhite (miwillhite)
Creator, Maintainer
David Richards (davidrichards)
Helped fix and rethink the repopulation script
Copyright (c) 2010 Matthew Willhite, released under the MIT license