{"id":17682531,"url":"https://github.com/thewalkingtoast/simple-edit","last_synced_at":"2026-05-02T03:33:12.084Z","repository":{"id":2982425,"uuid":"3998325","full_name":"thewalkingtoast/simple-edit","owner":"thewalkingtoast","description":"A jQuery plugin to add easy and quick form editing to a page.","archived":false,"fork":false,"pushed_at":"2013-08-29T01:34:31.000Z","size":180,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T19:32:11.431Z","etag":null,"topics":["ajax","ajax-form","forms","javascript","jquery","jquery-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thewalkingtoast.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-04-11T21:07:32.000Z","updated_at":"2018-04-30T01:07:11.000Z","dependencies_parsed_at":"2022-09-18T01:01:36.603Z","dependency_job_id":null,"html_url":"https://github.com/thewalkingtoast/simple-edit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thewalkingtoast/simple-edit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingtoast%2Fsimple-edit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingtoast%2Fsimple-edit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingtoast%2Fsimple-edit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingtoast%2Fsimple-edit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thewalkingtoast","download_url":"https://codeload.github.com/thewalkingtoast/simple-edit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingtoast%2Fsimple-edit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32522247,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-02T01:12:54.858Z","status":"online","status_checked_at":"2026-05-02T02:00:05.923Z","response_time":132,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ajax","ajax-form","forms","javascript","jquery","jquery-plugin"],"created_at":"2024-10-24T09:22:26.725Z","updated_at":"2026-05-02T03:33:12.068Z","avatar_url":"https://github.com/thewalkingtoast.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"jQuery Simple Edit Plugin\n======================\n\n##Introduction\n\nThis jQuery plugin is meant to simplify client-side form editing. It has the ability to quickly enable one\nform value to be edited on the fly, by double-clicking, and then submitted to the server for saving.\nSimpleEdit also supports classic full form editing (known as editAll mode).\n\n##Requirements\n\n- jQuery 1.6\n\n##Demo Requirements\n\n- A web server running PHP5.2+\n- jQuery 1.6+ (included)\n- jQueryUI 1.8.18 + theme (included)\n- jQuery Validation Engine + language file (included)\n\n##Getting Started\n\nTo get started, download either `jquery.simpleEdit.js` (uncompressed) or `jquery.simpleEdit.min.js`\n(compressed) JavaScript file, the `jquery.simpleEdit.css` file and include them in your HTML:\n\n```HTML\n\u003clink href=\"css/jquery.simpleEdit.css\" type=\"text/css\" rel=\"stylesheet\"\u003e\u003c/link\u003e\n\u003cscript src=\"js/jquery.simpleEdit.min.js\"\u003e\u003c/script\u003e\n```\n\nUse the following HTML markup to make form fields:\n\n```HTML\n\u003clabel\u003eUsername\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-type=\"text\" data-se-name=\"username\"\u003e\n\n\u003c/span\u003e\n\u003clabel\u003ePhone\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-type=\"text\" data-se-name=\"userphone\"\u003e\n\n\u003c/span\u003e\n```\n\nThen, in your jQuery `$(document).ready()`, or elsewhere, to initiate simpleEdit:\n\n```JavaScript\n$.simpleEdit({\n\tsaveUrl: \"/Users/update\",\n\teditAllTrigger: \"#editAll\"\n});\n```\n##EditAll Mode\n\nThe `editAllTrigger` is a simple jQuery selector for any element (button, link, etc.) that will cause all `.editable`\nform fields to be editable when clicked.\n\n##Server Request\n\nUpon saving, simpleEdit will send a single POST request to the `saveURL` provided with the `se-name` of the edited `\u003cspan\u003e`\nas a key using the user-specified value as the value. You can also have simpleEdit send additional data along (such as a user ID), see Configuration below.\n\nHere is an example of what a single edit would look like:\n\n```JavaScript\n{\n\tusername: \"CoolDude22\"\n}\n//Raw POST: username=CoolDude22\n```\n\nHere is an example of a mass (multi) edit:\n\n```JavaScript\n{\n\tusername: \"CoolDude22\",\n\tuserphone: \"555-1001\"\n}\n// Raw POST: username=CoolDude22\u0026userphone=555-1001\n```\n\n##Server Response\n\nThe server should send a JSON response to the save request in the following format:\n\n```JavaScript\n{\n\t\"success\": true // true if save was successful, false if not\n}\n```\n\nSending `false` back will prevent simpleEdit from updating the value in the HTML.\nAdditional data can be sent back in this request and used. See Configuration below.\n\n##Span Markup\n\nThe HTML markup used for the `\u003cspan\u003e` will determine how simpleEdit responds to that particular form field. The options\nare as follows:\n\n```JavaScript\n{\n\tse-type: \"text\",\n\tse-name: \"myFieldName\",\n\tse-validation: \"validation[required]\",\n\tse-opts: {\"on\":\"Yes\",\"off\":\"No\"},\n\tse-ajax-data: '{\"fieldID\":\"215315\"}'\n}\n```\n\n###Configuration option breakdown:\n- `se-type`: One of text, password, email, select, checkbox, radio, or textarea. Pair with jQueryUI and use \"datepicker\" or \"autocomplete\".\n- `se-name`: The field name to save the form field as.\n- `se-validation`: The validation rules needed to validate this form field by the jQuery Validation Engine.\n- `se-opts`: The \u003coption\u003es for select se-types or the additional \u003cradio\u003es for radio in a key-value pair. When using datepicker or autocomplete, this is the standard configuration object passed to those objects on initialization or can be string to a window object. See examples below.\n- `se-ajax-data`: Any field-level specific data you want simpleEdit to send to saveURL in addition to the field se-name and field value.\n\nFor example, the following `\u003cspan\u003e` markup:\n\n```HTML\n\u003clabel\u003ePreferred Contact Method\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-validation=\"validation[required]\" data-se-type=\"select\"\n data-se-name=\"preferred-contact\" data-se-opts='{\"\":\"\",\"email\":\"Email\",\"homephone\":\"Home Phone\",\"cellphone\":\"Cell Phone\",\"tweet\":\"Twitter\"}'\u003e\n\n\u003c/span\u003e\n```\nWill generate the following real form field during editing:\n\n```HTML\n\u003cselect name=\"preferred-contact\"\u003e\n\t\u003coption value=\"\"\u003e\u003c/option\u003e\n\t\u003coption value=\"email\"\u003eEmail\u003c/option\u003e\n\t\u003coption value=\"homephone\"\u003eHome Phone\u003c/option\u003e\n\t\u003coption value=\"cellphone\"\u003eCell Phone\u003c/option\u003e\n\t\u003coption value=\"tweet\"\u003eTwitter\u003c/option\u003e\n\u003c/select\u003e\n```\n\nThis `\u003cselect\u003e` cannot have the first blank option selected because the validation was set to required.\n\n##jQuery ValidationEngine Plugin\n\nsimpleEdit can integrate with the [jQuery Validation Engine](https://github.com/posabsolute/jQuery-Validation-Engine) plugin to provide form field validation\nin either single or editAll modes. Include the jQuery Validation Engine on your page and then\nsimply add `data-se-validation=\"insert-your-validation-rules-here\"` to the\n`\u003cspan\u003e` markup.\n\nFor example:\n\n```HTML\n\u003clabel\u003eCity\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-validation=\"validate[custom[onlyLetterSp]]\" data-se-type=\"text\" data-se-name=\"city\"\u003e\n\n\u003c/span\u003e\n```\n\nLastly, be sure to initiate simpleEdit with the validation engine plugin option:\n\n```JavaScript\n$.simpleEdit({\n\tsaveUrl: \"/Users/update\",\n\teditAllTrigger: \"#editAll\",\n\tuseValidationEngine: true\n});\n```\n\n##jQuery UI .datepicker() and .autocomplete()\n\nWhen using jQuery UI, you can set the `se-type` of a span to either \"datepicker\" or \"autocomplete\" to use these jQuery UI widgets with simpleEdit. There are two ways to configure datepicker and autocomplete:\n\n###1) Use initialization object\n\n```HTML\n\u003clabel\u003eEvent Date\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-type=\"text\" data-se-name=\"event-date\" data-se-opts='{\"dateFormat\":\"yy-mm-dd\",\"changeMonth\":true,\"changeYear\":true}'\u003e\n\n\u003c/span\u003e\n```\n\nis equivelant to\n\n```JavaScript\n$().datepicker({\"dateFormat\":\"yy-mm-dd\",\"changeMonth\":true,\"changeYear\":true});\n```\n\n###2) Use `window` object via string\n\n```HTML\n\u003clabel\u003eEvent Date\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-type=\"text\" data-se-name=\"event-date\" data-se-opts=\"EventDate\"\u003e\n\n\u003c/span\u003e\n```\nis equivelant to\n\n```JavaScript\n$().datepicker(window.EventDate);\n```\n\nYou can also key further, if needed:\n\n```HTML\n\u003clabel\u003eEvent Date\u003c/label\u003e\n\u003cspan class=\"editable\" data-se-type=\"text\" data-se-name=\"event-date\" data-se-opts=\"Event.settings.date\"\u003e\n\n\u003c/span\u003e\n```\nis equivelant to\n\n```JavaScript\n$().datepicker(window.Event.settings.date);\n```\n\n##Configuration\n\nsimpleEdit provides quite a few different options for customizing its behavior (the values shown are defaults):\n\n```JavaScript\n{\n\t/**\n\t* The URL simpleEdit will save form data to. Can be absolute or relative.\n\t*\n\t*/\n\tsaveUrl: window.location.href,\n\n\t/**\n\t* A jQuery selector \u003cspan\u003es that simpleEdit will respond to.\n\t*\n\t*/\n\teditClass: \".editable\",\n\n\t/**\n\t* Whether the form should initialize in editAll mode or not.\n\t* editAll mode displays all editClass \u003cspan\u003es as editable.\n\t*\n\t*/\n\teditAllDefault: false,\n\n\t/**\n\t* A jQuery selector for the element (button, link, etc) that, when clicked,\n\t* will cause simpleEdit to enter editAll mode.\n\t*\n\t*/\n\teditAllTrigger: \"\",\n\n\t/**\n\t* Any additional data you wish simpleEdit to send to the server when it\n\t* is saving form data such as the current user ID.\n\t*\n\t* This option is meant for immutable data. It is meant for data that is\n\t* necessary to all save requests on the page but is not directly unique\n\t* to the field/value being saved. To do this, please see the\n\t* 'beforeSave' function below.\n\t*\n\t*/\n\tajaxData: {},\n\n\t/**\n\t* This option allows you to provide your own function to modify the data\n\t* simpleEdit will send to the saveURL before it is sent.\n\t*\n\t* postObj is an object literal containing the se-name and value, plus any\n\t* data added to ajaxData.\n\t*\n\t* Modify the object as needed and simply return it.\n\t*\n\t*/\n\tbeforeSave: function beforeSave(postObj){return postObj;},\n\n\t/**\n\t* This option allows you customize simpleEdit's behavior after\n\t* a successful save.\n\t*\n\t* The function arguments are as follows:\n\t*\n\t*\t$element - A jQuery object representing the raw generated form element.\n\t*\n\t*\tdata - The POST data simpleEdit had previously sent to the saveURL,\n\t*\t\t\talong with any data from the ajaxData option and any modifications\n\t*\t\t\tfrom the beforeSave option.\n\t*\n\t*\tresponse - The direct response from the saveURL. If the saveURL sent back\n\t*\t\t\t\tany additional data in the response aside from the 'success'\n\t*\t\t\t\tkey, you will access to it here.\n\t*\n\t*/\n\tafterSave: function afterSave($element, data, response){},\n\n\t/**\n\t* This option allows you to change, or otherwise mutate, the value\n\t* of the form field that simpleEdit is retrieving after 'Save' is clicked,\n\t* and before it is sent to saveURL. For instance, on checkboxes, you may\n\t* wish to send back 1 or 0 instead of 'on' and ''.\n\t*\n\t* The function arguments are as follows:\n\t*\n\t*\t$element - A jQuery object representing the raw generated form element.\n\t*\n\t*/\n\tbeforeFilter: function beforeFilter($element){return $element.text();},\n\n\t/**\n\t* This option allows you to change, or otherwise mutate, the value\n\t* of the form field that simpleEdit will save back to the \u003cspan\u003e after\n\t* a successful POST request to saveURL. For instance, this can be used\n\t* to format numbers or currency for display.\n\t*\n\t* The function arguments are as follows:\n\t*\n\t*\t$element - A jQuery object representing the raw generated form element.\n\t*\n\t*\tdata - The POST data simpleEdit had previously sent to the saveURL,\n\t*\t\t\talong with any data from the ajaxData option and any modifications\n\t*\t\t\tfrom the beforeSave option.\n\t*\n\t*/\n\tafterFilter: function afterFilter($element, data){return data.newText;},\n\n\t/**\n\t* Whether to use the validationEngine plugin or not.\n\t*\n\t* See the jQuery validationEngine plugin for more details:\n\t* \u003chttps://github.com/posabsolute/jQuery-Validation-Engine\u003e\n\t*\n\t*/\n\tuseValidationEngine: false,\n\n\t/**\n\t* An object literal of the options you want simpleEdit to send to\n\t* the validationEngine plugin on initialization.\n\t*\n\t* See the jQuery validationEngine plugin for more details:\n\t* \u003chttps://github.com/posabsolute/jQuery-Validation-Engine\u003e\n\t*\n\t*/\n\tvalidationEngineOptions: {\"scroll\" : true},\n\n\t/**\n\t* The class to append to \u003cspan\u003es with an empty value to modify\n\t* the look of the placeholder text.\n\t*\n\t* By default, the CSS for this class is:\n\t*\n\t* { color: #CCC; font-style: italic; }\n\t*\n\t*/\n\tplaceholderClass: \"simple-edit-placeholder\",\n\n\t/**\n\t* The placeholder text to display when a \u003cspan\u003e contains an empty value.\n\t* This also is simple instructions for how to edit the form field.\n\t*\n\t*/\n\tplaceholderText: \"Double-click to Edit\"\n}\n```\n\n##Demo Application\n\nThere is a sample application built for your reference included.\n\n##Getting Help\n\nIf you need help with jQuery Simple Edit, please open an issue.\n\n##License\n\nLicensed under the MIT License\n\nCopyright (c) 2013 Adam Radabaugh\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software\nand associated documentation files (the \"Software\"), to deal in the Software without\nrestriction, including without limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the\nSoftware is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or\nsubstantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,\nINCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR\nPURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE\nFOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\nARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewalkingtoast%2Fsimple-edit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthewalkingtoast%2Fsimple-edit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewalkingtoast%2Fsimple-edit/lists"}