X-Editable

This library allows you to create editable elements on your page. It can be used both popup and inline modes.

Basic example

Use data-mode="{inline | popup}" to determine the display mode of the plugin.

Inline	Popup (top \| right \| bottom \| left)
Username: Umblerito	Umblerito Umblerito Umblerito Umblerito

...
  <td>
    <span>Username: </span>
    <a href="#" class="xeditable" data-mode="inline" data-type="text" data-placement="right" data-title="Enter username">Umblerito</a>
  </td>
  <td>
    <a href="#" class="xeditable mr-1" data-mode="popup" data-type="text" data-placement="{top | right | bottom | left}" data-title="Enter username">Umblerito</a>
  </td>
...

// inline mode
$('.xeditable').editable();

With select

Inline	Popup

...
  <td>
    <a href="#" class="xeditable-select" data-type="select" data-pk="1" data-mode="inline" data-value=""></a>
  </td>
  <td>
    <a href="#" class="xeditable-select" data-mode="popup" data-type="select" data-pk="1" data-placement="right" data-value=""></a>
  </td>
...

$('.xeditable-select').editable({
  prepend: "select role",
  source: [
    {value: 1, text: 'Admin'},
    {value: 2, text: 'Editor'}
  ]
});