ObjectEditAdaptor jQuery Plugin

ObjectEditAdaptor

Summary

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) { }
});

Materialize Demo

Raw JSON:
Live Object JSON:

Bootstrap Demo

Live Object JSON:

Modify the Object & DOM with JavaScript

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.

Component Gallery

Text (Single Line)

The values entered are "" and ""
Live Object Preview
Show Code

Text (Multiple Line)

The values entered are "" and ""
Live Object Preview
Show Code

Number

The values entered are and
Live Object Preview
Show Code

Dropdown

Standard:
Chosen Select:
The values entered are "", "", and ""
Live Object Preview
Show Code

Dropdown (Multiple Selection)

Multiple Select jQuery Plugin:
The values entered are "" and ""
Live Object Preview
Show Code

Checkbox

The values entered are , , and
Live Object Preview
Show Code

Radio Buttons

The selected value is ""
Live Object Preview
Show Code

Download

file_downloadObjectEditAdaptor


Explore Chakra7 Today