Edit in place plugin for jQuery
This is a demo page, have a look at the source to see how each example is implemented!
<!-- include this in your HTML -->
<script src=/path/to/jquery.jeditable.min.js></script>
Click this text to edit it.
$(".editable-text").editable("save.php");Click this text to edit it.
/* data that will be sent along */
var submitdata = {}
/* this will make the save.php script take a long time so you can see the spinner ;) */
submitdata['slow'] = true;
submitdata['pwet'] = 'youpla';
$(".editable-text-full").editable("save.php", {
indicator : "<img src='img/spinner.svg' />",
type : "text",
// only limit to three letters example
//pattern: "[A-Za-z]{3}",
onedit : function() { console.log('If I return false edition will be canceled'); return true;},
before : function() { console.log('Triggered before form appears')},
callback : function(result, settings, submitdata) {
console.log('Triggered after submit');
console.log('Result: ' + result);
console.log('Settings.width: ' + settings.width);
console.log('Submitdata: ' + submitdata.pwet);
},
cancel : 'Cancel',
cssclass : 'custom-class',
cancelcssclass : 'btn btn-danger',
submitcssclass : 'btn btn-success',
maxlength : 200,
// select all text
select : true,
label : 'This is a label',
onreset : function() { console.log('Triggered before reset') },
onsubmit : function() { console.log('Triggered before submit') },
showfn : function(elem) { elem.fadeIn('slow') },
submit : 'Save',
submitdata : submitdata,
/* submitdata as a function example
submitdata : function(revert, settings, submitdata) {
console.log("Revert text: " + revert);
console.log(settings);
console.log("User submitted text: " + submitdata.value);
},
*/
tooltip : "Click to edit...",
width : 160
});
/* target as a function example
$(".editable-text-full").editable(function(input, settings, elem) {
console.log(input);
console.log(settings);
console.log($(elem).data('test'));
}, {});
*/
If you click anywhere on this text, it will become a textarea that you can edit. And then you can click OK to save it.
$(".editable_textarea").editable("save.php", {
type : 'textarea',
submit : 'OK',
cancel : 'Nope'
});
THIS IS A SELECT, click it to get a select menu. Options are from the "data" setting.
THIS IS A SELECT WITH JSON FEED, click it to get a select menu. Options are loaded from an ajax request getting JSON.
THIS IS A MULTIPLE SELECT.You can select several values (try holding Shift or Ctrl).
// inline select
$(".editable-select").editable("save.php", {
type : "select",
// this data will be sorted by value
data : '{"Wiki":"Wiki","Banana":"Banana","Apple":"Apple", "Pear":"Pear"}',
submitdata : function() { return {id : 42, something: 'else'};},
style : "inherit",
});
// with JSON feed
$(".editable-select-json").editable("save.php", {
type : "select",
loadurl : "json.php",
submit : "OK",
style : "inherit"
});
// MULTIPLE SELECT
$(".multiple-select").editable("save.php", {
type : "select",
data : '{"Wiki":"Wiki","Banana":"Banana","Apple":"Apple", "Pear":"Pear"}',
submit: 'OK',
multiple : true,
onblur: function() { return true; },
// use intercept to display the results as we want it
intercept: function(result, status) {
return "You selected: " + result + ". ";
},
onerror: function(settings, self, xhr) {
console.log("Error with status code: " + xhr.status);
},
submitdata : function(revert, settings, result) {
console.log("User selected values: " + result.value);
},
});
Click me if you dare! or maybe you should doubleclick instead? Really lazy people can just mouseover me...
// click
$(".click").editable("save.php", {
tooltip : "Click to edit...",
style : "inherit"
});
// double click
$(".dblclick").editable("save.php", {
tooltip : "Doubleclick to edit...",
event : "dblclick",
style : "inherit"
});
// mouseover
$(".mouseover").editable("save.php", {
tooltip : "Move mouseover to edit...",
event : "mouseover",
style : "inherit"
});
Useful if you want to process the returned data before it hits the page.
Click here to test the intercept option.
$(".intercept").editable("json2.php", {
submit : 'OK',
intercept : function(jsondata) {
json = JSON.parse(jsondata);
console.log(json.status);
console.log(json.other);
return json.result;
},
});
You can restrict input to emails, numbers or urls
click@edit.me
-2.06
https://www.example.com
// EMAIL
$(".email").editable("save.php", {
type: "email",
tooltip: "Enter a valid email address",
placeholder: "nico.tesla@example.com",
});
// NUMBER
$(".number").editable("save.php", {
type: "number",
tooltip: "Click to edit: number",
placeholder: "0",
min: 0,
max: 10,
step: 1
});
// URL
$(".url").editable("save.php", {
type: "url",
tooltip: "Enter a valid URL",
placeholder: "https://www.example.com"
});
If you want to use different css class for the submit and cancel button. Also show how to add an ID to the form.
$(".css-buttons").editable("save.php", {
submit : 'OK',
cancel : 'Cancel',
cssclass : 'custom-class',
cancelcssclass : 'btn btn-danger',
submitcssclass : 'btn btn-success',
formid : 'abc-123'
});
Click here to test checkbox input
$(".checkbox").editable("save.php", {
type : "checkbox",
submit : 'ok'
});
<!-- also include this in your HTML -->
<script src=/path/to/jquery.jeditable.datepicker.min.js></script>
<!-- also include jQuery-UI JS and CSS files -->
16-09-2018
$(".datepicker").editable("save.php", {
type : 'datepicker',
submit : 'OK',
datepicker : {
format: "dd-mm-yy"
},
tooltip : "Click to edit..."
});
<!-- also include this in your HTML -->
<script src=/path/to/jquery.jeditable.autogrow.min.js></script>
<script src=/path/to/jquery.autogrowtextarea.js></script>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Depends on Autogrow-Textarea by Jevin O. Sewaruth.
$(".autogrow").editable("save.php", {
type : "autogrow",
submit : 'OK',
cancel : 'cancel',
tooltip : "Click to edit...",
onblur : "ignore"
});
<!-- also include this in your HTML -->
<script src=/path/to/jquery.jeditable.masked.min.js></script>
<script src=/path/to/jquery.maskedinput.js></script>
19/12/2017
Depends on Masked Input by Josh Bush.
$(".masked").editable("save.php", {
type : "masked",
mask : "99/99/9999",
submit : 'OK',
tooltip : "Click to edit..."
});
<!-- also include this in your HTML -->
<script src=/path/to/jquery.jeditable.time.min.js></script>
16:30
$(".timepicker").editable("save.php", {
type : 'time',
submit : 'OK',
tooltip : "Click to edit..."
});
<!-- also include this in your HTML -->
<script src=/path/to/jquery.jeditable.charcounter.min.js></script>
<script src=/path/to/jquery.charcounter.js></script>
The number of characters in the textarea will be counted.
$(".charcounter").editable("save.php", {
type : "charcounter",
submit : 'OK',
tooltip : "Click to edit...",
onblur : "ignore",
charcounter : {
characters : 60
}
});