{"id":13992395,"url":"https://github.com/NicolasCARPi/jquery_jeditable","last_synced_at":"2025-07-22T15:32:11.001Z","repository":{"id":450685,"uuid":"73886","full_name":"NicolasCARPi/jquery_jeditable","owner":"NicolasCARPi","description":"jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really.","archived":true,"fork":false,"pushed_at":"2022-07-28T23:30:38.000Z","size":1060,"stargazers_count":1744,"open_issues_count":0,"forks_count":460,"subscribers_count":73,"default_branch":"master","last_synced_at":"2024-05-01T21:59:16.100Z","etag":null,"topics":["edit-in-place","javascript","jquery","jquery-plugin","mit-license"],"latest_commit_sha":null,"homepage":"https://jeditable.elabftw.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NicolasCARPi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":"FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"liberapay":"NicolasCARPi","github":"NicolasCARPi"}},"created_at":"2008-11-10T13:57:37.000Z","updated_at":"2024-05-01T21:59:16.101Z","dependencies_parsed_at":"2022-07-06T22:02:44.535Z","dependency_job_id":null,"html_url":"https://github.com/NicolasCARPi/jquery_jeditable","commit_stats":null,"previous_names":["tuupola/jquery_jeditable"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasCARPi%2Fjquery_jeditable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasCARPi%2Fjquery_jeditable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasCARPi%2Fjquery_jeditable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NicolasCARPi%2Fjquery_jeditable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NicolasCARPi","download_url":"https://codeload.github.com/NicolasCARPi/jquery_jeditable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227133790,"owners_count":17735808,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["edit-in-place","javascript","jquery","jquery-plugin","mit-license"],"created_at":"2024-08-09T14:01:58.626Z","updated_at":"2024-11-29T13:30:32.265Z","avatar_url":"https://github.com/NicolasCARPi.png","language":"JavaScript","readme":"# jquery-jeditable\n\n[![npm](https://img.shields.io/npm/v/jquery-jeditable.svg)](https://www.npmjs.com/package/jquery-jeditable)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/0cb32ce695b743d68257021455330c66)](https://www.codacy.com/app/elabftw/jquery_jeditable)\n[![GitHub license](https://img.shields.io/github/license/NicolasCARPi/jquery_jeditable.svg)](https://github.com/NicolasCARPi/jquery_jeditable/blob/master/LICENSE)\n\n# DEPRECATION NOTICE\n\n**This project is deprecated** and should not be used in a fresh project. Have a look at [Malle](https://github.com/deltablot/malle/) library instead. It is more or less the same, but in typescript and without a jQuery dependency.\n\n## Alternative library\n\nUse [Malle](https://github.com/deltablot/malle/).\n\n\n## Description\n\nEdit in place plugin for [jQuery](https://jquery.com/) (compatible with jQuery v3.4.0+).\n\nBind it to an element on the page, and when clicked the element will become a form that will be sent by asynchronous (ajax) POST request to an URL.\n\n[![demo](https://i.imgur.com/lEmY8l0.gif)](https://jeditable.elabftw.net)\n\nWorks with text inputs, textarea, select, datepicker, and more… Comes with a ton of different options you can use to do exactly what you want!\n\n## Live demo\n\nSee it in action: [LIVE DEMO](https://jeditable.elabftw.net/)\n\n## Installation\n\n~~~bash\nnpm install jquery-jeditable\n~~~\n\n## Usage\n\n### Loading the library\n\nUse a `\u003cscript\u003e` tag loading the file `dist/jquery.jeditable.min.js` from your server, or use the [CDNJS link](https://cdnjs.com/libraries/jeditable.js).\n\n### Most basic usage\n\nThere is only one mandatory parameter. URL where browser sends edited content.\n\n~~~javascript\n$(document).ready(function() {\n     $('.edit').editable('save.php');\n });\n~~~\n\nCode above does several things:\n\nElements with class `edit` become editable. Editing starts with single mouse click. Form input element is text. Width and height of input element matches the original element. If user clicks outside form, changes are discarded. Same thing happens if user hits ESC. When user hits ENTER, browser submits text to save.php.\n\nNot bad for oneliner, huh? Let's add some options.\n\n### Adding options\n\n~~~javascript\n$(document).ready(function() {\n    $('.edit').editable('save.php', {\n        indicator : 'Saving…',\n        event     : 'dbclick',\n        cssclass  : 'custom-css',\n        submit    : 'Save',\n        tooltip   : 'Double click to edit…'\n    });\n\n    $('.edit_area').editable('save.php', {\n        type      : 'textarea',\n        cancel    : 'Cancel',\n        submit    : 'OK',\n        indicator : '\u003cimg src=\"img/spinner.svg\" /\u003e',\n        tooltip   : 'Click to edit…'\n    });\n\n    $('.edit_select').editable('save.php', {\n        type           : 'select',\n        indicator      : 'Saving ...',\n        loadurl        : 'api/load.php',\n        inputcssclass  : 'form-control',\n        cssclass       : 'form'\n    });\n});\n~~~\n\nIn the code above, the elements of class `edit` will become editable with a double click. It will show 'Saving…' when sending the data. The CSS class `custom-css` will be applied to the element. The button to submit will show the 'Save' text.\n\nThe elements of class `edit_area` will become editable with a textarea. An image will be displayed during the save.\n\nThe elements of class `edit_select` will become a selectable drop-down list.\n\nBoth elements will have a tooltip showing when mouse is hovering.\n\nThe [live demo](https://jeditable.elabftw.net) shows more example but with that you can already do plenty!\n\nThe complete list of options is available here: [FULL LIST OF OPTIONS](https://jeditable.elabftw.net/api/#jquery-jeditable)\n\n### What is sent to the server?\n\nWhen the user clicks the submit button a POST request is sent to the target URL like this:\n\n~~~javascript\nid=element_id\u0026value=user_edited_content\n~~~\n\nWhere `element_id` is the id of the element and `user_edited_content` is what the user entered in the input.\n\nIf you'd like to change the names of the parameters sent, you need to add two options:\n\n~~~javascript\n$('.edit').editable('save.php', {\n    id   : 'bookId',\n    name : 'bookTitle'\n});\n~~~\n\nAnd the code above will result in this being sent to the server:\n\n~~~javascript\nbookId=element_id\u0026bookTitle=user_edited_content\n~~~\n\n### Loading data\n\nIf you need to load a different content than the one displayed (element is from a Wiki or is in Markdown or Textile and you need to load the source), you can do so with the `loadurl` option.\n\n~~~javascript\n$('.edit_area').editable('save.php', {\n    loadurl  : 'load.php',\n    loadtype : 'POST',\n    loadtext : 'Loading…',\n    type    : 'textarea',\n    submit  : 'OK'\n});\n~~~\n\nBy default it will do a GET request to `loadurl`, so if you want POST, add the `loadtype` option. And `loadtext` is to display something while the request is being made.\n\nThe PHP script `load.php` should return the source of the text (so markdown or wiki text but not html).\n\nAnd save.php should return the html (because this is what is displayed to the user after submit).\n\nOr you can pass the source in the `data` option (which accepts a string or a function).\n\nI like writing sentences (and finishing them with text in parenthesis).\n\n### Using selects\n\nYou can use selects by giving type parameter value of select. Select is built from JSON encoded array. This array can be given using either `data` parameter or fetched from external URL given in `loadurl` parameter. Array keys are values for `\u003coption\u003e` tag. Array values are text shown in pulldown.\n\nJSON encoded array looks like this:\n\n~~~json\n{\"E\":\"Letter E\",\"F\":\"Letter F\",\"G\":\"Letter G\", \"selected\":\"F\"}\n~~~\n\nNote the last entry. It is special. With value of `selected` in array you can tell Jeditable which option should be selected by default. Lets make two simple examples. First we pass values for pulldown in data parameter:\n\n~~~javascript\n$('.editable-select').editable('save.php', {\n    data   : '{\"E\":\"Letter E\",\"F\":\"Letter F\",\"G\":\"Letter G\", \"selected\":\"F\"}',\n    type   : 'select',\n    submit : 'OK'\n});\n~~~\n\nWhat if you need to generate values for pulldown dynamically? Then you can fetch values from external URL. Let's assume we have the following PHP script:\n\n~~~php\n \u003c?php // json.php\n $array['E'] =  'Letter E';\n $array['F'] =  'Letter F';\n $array['G'] =  'Letter G';\n $array['selected'] =  'F';\n echo json_encode($array);\n~~~\n\nThen instead of `data` parameter we use `loadurl`:\n\n~~~javascript\n$('.editable-select').editable('save.php', {\n    loadurl : 'json.php',\n    type   : 'select',\n    submit : 'OK'\n});\n~~~\n\n### Styling elements\n\nYou can style input element with `cssclass` and `style` parameters. First one assumes to be the name of a class defined in your CSS. Second one can be any valid style declaration as string. Check the following examples:\n\n~~~javascript\n$('.editable').editable('save.php', {\n    cssclass : 'someclass'\n});\n\n$('.editable').editable('save.php', {\n    loadurl : 'json.php',\n    type    : 'select',\n    submit  : 'OK',\n    style   : 'display: inline'\n});\n~~~\n\n\nBoth parameters can have special value of `inherit`. Setting class to `inherit` will make the form inherit the parent's class. Setting `style` to `inherit` will make form to have same style attribute as its parent.\n\nFollowing example will make the word **oranges** editable with a pulldown menu. This pulldown inherits style from `\u003cspan\u003e`. Thus it will be displayed inline.\n\n~~~html\nI love eating \u003cspan class=\"editable\" style=\"display: inline\"\u003eoranges\u003c/span\u003e.\n~~~\n\n~~~javascript\n$('.editable').editable('save.php', {\n    loadurl : 'json.php',\n    type    : 'select',\n    submit  : 'OK',\n    style   : 'inherit'\n});\n~~~\n\n### Submitting to function instead of URL\n\nSome people want to control absolutely everything. I want to keep you happy. You can get full control of Ajax request. Just submit to function instead of URL. Parameters passed are same as with callback.\n\n~~~javascript\n$('.editable').editable(function(value, settings) {\n    console.log(this);\n    console.log(value);\n    console.log(settings);\n    return(value);\n}, {\n    type    : 'textarea',\n    submit  : 'OK',\n});\n~~~\n\nNote that the function must return a string. Usually the edited content. This will be displayed on the page after editing.\n\n### Other options\n\nThe demo contains other examples, [have a look!](https://jeditable.elabftw.net)\n\nThe complete list of options is available here: [FULL LIST OF OPTIONS](https://jeditable.elabftw.net/api/#jquery-jeditable)\n\n## Support\n\nPlease open a [GitHub issue](https://github.com/NicolasCARPi/jquery_jeditable/issues/new) if you have a bug to report, a question to ask or if you just want to discuss something related to the project.\n","funding_links":["https://liberapay.com/NicolasCARPi","https://github.com/sponsors/NicolasCARPi"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNicolasCARPi%2Fjquery_jeditable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNicolasCARPi%2Fjquery_jeditable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNicolasCARPi%2Fjquery_jeditable/lists"}