ObjectEditAdaptor allows developers to represent a JSON object using the DOM display elements and input fields. The end user can edit the object by adjusting the field values
ObjectEditAdaptor plays great with the leading web frameworks, Bootstrap and Materialize as well as with the best jQuery form plugins like Chosen and Multiple Select
Fully customizable with options and event callbacks
Usage, Options, and Events
$("#elem").ObjectEditAdaptor({
"dataSrc": JSObj, //JavaScript Object that will be edited when the user uses the adaptor
"mapping": { //Object that describes how the UI relates to underlying data
"propName": {
"el":$('#elemId'), //Input Element (Optional)
"disp":$('.elemClass'), //Display Element(s)(Optional)
"type": "number" | "date" | "dateTime" //Special Types, Optional, use when appropriate
}, ...
},
/* ADDITIONAL OPTIONS */
"defaultObj": { //Enforce property existance with default values
"propA":1,
"propB":true,
"propC":"Think For Yourself"
},
"saveRate":500, //The default millisecond lapse enforced before save callback is called after last user interaction
"states": {
"stateName1":function() { }, …
},
"startState": "stateName",
/* EVENT CALLBACKS */
"dataChanged": function(ObjectEditObj, changeDef, dataObj) { }
"save": function(ObjectEditObj, changeDef, dataObj) { }
});
ObjectEditAdaptor also allows for the developer to modify the object and its edit and display DOM elements with one easy function, updateProperty
var OEA = $("#element").ObjectEditAdaptor({});
OEA.updateProperty("fName", "Tom")
The dataChanged and save Callback Functions
The developer can listen for updates to the object properties using the dataChanged callback event. The save callback is exactly the same as dataChanged except it is not called repetitively on every keyup but waits a certain amount of time(the saveRate) of no user interaction to fire
The callback functions should be defined as follows:
$("#elem").ObjectEditAdaptor({
"dataSrc": JSObj, //JavaScript Object that will be edited when the user uses the adaptor
"mapping": { //Object that describes how the UI relates to underlying data
"propName": {
"el":$('#elemId'), //Input Element (Optional)
"disp":$('.elemClass'), //Display Element(s)(Optional)
"type": "number" | "date" | "dateTime" //Special Types, Optional, use when appropriate
}, ...
},
/* EVENT CALLBACKS */
"dataChanged": function(ObjectEditObj, changeDef, dataObj) {
// objEditAdaptor => A reference to the plugin object
// changeDef => The change made, {"prop":prop, "newVal":newVal}
// newObjData => Current dataSrc object
}
"save": function(ObjectEditObj, changeDef, dataObj) {
// objEditAdaptor => A reference to the plugin object
// changeDef => The change made, {"prop":prop, "newVal":newVal}
// newObjData => Current dataSrc object
}
});
Event Callbacks: changeDef
The second parameter, changeDef, is especially useful.
Takes the form of: {"prop":prop, "newVal":newVal}
This tells us which property changed(prop) and what it’s new value is(newVal). For <select> dropdowns and plugins like Materialize Select, Chosen, MultipleSelect the previously selected value is also included as prevVal.
