X-Editable

Simple text field

<a href="#" id="text" data-pk="1">John Doe3</a>
$("#text").editable({
  type: "text",
  title: "Enter text"
});

Text area

<a href="#" id="textarea" data-pk="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit ex, tincidunt vitae urna accumsan, lobortis finibus urna. Pellentesque et.</a>
$("#textarea").editable({
  url: "/post",
  title: "Enter username"
});

Select


Do not name your element "select", otherwise data are not stored in database
<a href="#" id="selectlist" data-pk="1" data-value="1"></a>
$("#selectlist").editable({
  type: "select",
  title: "Select status",
  source: [
    {value: 1, text: "Active"},
    {value: 2, text: "Blocked"},
    {value: 3, text: "Deleted"}
  ]
});

Combo date

<a href="#" id="combo" data-value="2015-09-04" data-pk="1"></a>
$("#combo").editable({
  type: "combodate",
  format: "YYYY-MM-DD",    
  viewformat: "DD.MM.YYYY",   
  template: "D / MMMM / YYYY",    
  combodate: {
    minYear: 2000,
    maxYear: 2015,
    minuteStep: 1
  }
});

Combo date time

<a href="#" id="combotime" data-pk="1" data-value="2015-09-04 01:39:14"></a>
$("#combotime").editable({
  title: "Setup event date and time",
  type: "combodate",
  format: "YYYY-MM-DD HH:mm",
  viewformat: "MMM D, YYYY, HH:mm",
  template: "D MMM YYYY  HH:mm",
  placement: "bottom",
  combodate: {
    firstItem: "name"
  }
});

Checklist

<a href="#" id="options" data-value="2,3,4,5" data-pk="1"></a>
$("#options").editable({
  title: "Select fruits",
  type: "checklist",
  limit: 3,
  source: [
    {value: 1, text: "banana"},
    {value: 2, text: "peach"},
    {value: 3, text: "apple"},
    {value: 4, text: "watermelon"},
    {value: 5, text: "orange"}
  ]
});

Select 2

<a href="#" id="select2" data-pk="1" data-value="BF"></a>
var countries = [];
$.each({"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", ...}, function(k, v) {
  countries.push({id: k, text: v});
}); 

$("#select2").editable({
  type: "select2",
  title: "Select country",
  source: countries,
  select2: {
    width: 200,
    placeholder: "Select country",
    allowClear: true
  } 
});