jQuery-jeditable

Edit in place plugin for jQuery

This is a demo page, have a look at the source to see how each example is implemented!

GitHub repository

Documentation

API Documentation

Core features

<!-- include this in your HTML -->
<script src=/path/to/jquery.jeditable.min.js></script>

Basic minimal example

The most basic example (press enter to validate). No options.

Click this text to edit it.

Show source code

$(".editable-text").editable("save.php");

Complete example

A more complete example with a bunch of options.

Click this text to edit it.

Show source code

/* 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'));
}, {});
*/

Normal textarea

Example of the 'textarea' type.

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.

Show source code

$(".editable_textarea").editable("save.php", {
    type   : 'textarea',
    submit : 'OK',
    cancel : 'Nope'
});

Select

Example of the 'select' type.

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).

Show source code

// 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", "selected":"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);
    },
});

Different events

By default a click will trigger an edit. But you can bind other events as shown below.

Click me if you dare! or maybe you should doubleclick instead? Really lazy people can just mouseover me...

Show source code

// 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"
});

Intercepting the data sent back

Useful if you want to process the returned data before it hits the page.

Click here to test the intercept option.

Show source code

$(".intercept").editable("json2.php", {
    submit : 'OK',
    intercept : function(jsondata) {
        json = JSON.parse(jsondata);
        console.log(json.status);
        console.log(json.other);
        return json.result;
    },
});

E-mail, numbers, URL

You can restrict input to emails, numbers or urls

-2.06

https://www.example.com

Show source code

// 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"
});

Styling the buttons

If you want to use different css class for the submit and cancel button. Also show how to add an ID to the form.

Click here to show the buttons

Show source code

$(".css-buttons").editable("save.php", {
    submit : 'OK',
    cancel : 'Cancel',
    cssclass : 'custom-class',
    cancelcssclass : 'btn btn-danger',
    submitcssclass : 'btn btn-success',
    formid : 'abc-123'
});

Checkbox

Click here to test checkbox input

Show source code

$(".checkbox").editable("save.php", {
    type      : "checkbox",
    submit : 'ok'
});

Features requiring plugins

Date Picker (requires jQuery-ui datepicker)

<!-- 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

Show source code

$(".datepicker").editable("save.php", {
    type      : 'datepicker',
    submit : 'OK',
    datepicker : {
        format: "dd-mm-yy"
    },
    tooltip   : "Click to edit..."
});

Autogrow textarea

<!-- 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.

Show source code

$(".autogrow").editable("save.php", {
    type      : "autogrow",
    submit    : 'OK',
    cancel    : 'cancel',
    tooltip   : "Click to edit...",
    onblur    : "ignore"
});

Masked Input

<!-- 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.

Show source code

$(".masked").editable("save.php", {
    type      : "masked",
    mask      : "99/99/9999",
    submit    : 'OK',
    tooltip   : "Click to edit..."
});

Time Picker

<!-- also include this in your HTML -->
<script src=/path/to/jquery.jeditable.time.min.js></script>

16:30

Show source code

$(".timepicker").editable("save.php", {
    type      : 'time',
    submit    : 'OK',
    tooltip   : "Click to edit..."
});

Character counter

<!-- 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.

Show source code

$(".charcounter").editable("save.php", {
    type      : "charcounter",
    submit    : 'OK',
    tooltip   : "Click to edit...",
    onblur    : "ignore",
    charcounter : {
        characters : 60
    }
});