In-place editing with Twitter Bootstrap, jQuery UI

X-editable is a library which allows you to create editable elements on your page. It can be used with bootstrap, jquery-ui, jquery and jQuery and includes both popup and inline modes. This library is not supposed to be used in place of a standard form, but in places where in-place editing is required, such as data tables where quick editing is required.

Creating the input field is as easy as given below, which when clicked will popup an input box as displayed above.


Submitting the values will be received on the server by the given post url. The file that processes the Ajax request can be as simple as below.

There are several input types supported by library. Each type may have additional configuration options. Input options are defined as well as other parameters of $().editable() method. Currently supported input types are : text, textarea, select, date, dateui, combodate, html5types, checklist, wysihtml5.

The library at presents works with IE7+ and all modern browsers.

One thought to “In-place editing with Twitter Bootstrap, jQuery UI”

  1. Please fix several issues with the example SQL query:

    1. mysql_escape_string() is used only for escaping strings, not identifiers. Replace mysql_escape_string($name) by “`” . str_replace(“`”, ““”, $name) . “`”.

    2. Prefer mysql_real_escape_string() as mysql_escape_string() ignores encoding used for the connection.

    3. Prefer ‘ over ” for delimiting MySQL strings as ” may be disabled for this usage:

Comments are closed.