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.

<a href="#" id="username" data-type="text" data-pk="1">awesome</a>
<script>
$(function(){
    $('#username').editable({
        url: '/posturl',
        title: 'Enter username'
    });
});
</script>

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.

<?php
    /*
    Script for update record from X-editable.
    */
 
    /*
    You will get 'pk', 'name' and 'value' in $_POST array.
    */
    $pk = $_POST['pk'];
    $name = $_POST['name'];
    $value = $_POST['value'];
 
    /*
     Check submitted value
    */
    if(!empty($value)) {
        /*
          If value is correct you process it (for example, save to db).
          In case of success your script should not return anything, 
          standard HTTP response '200 OK' is enough.
 
          for example:
          $result = mysql_query('update users set '.mysql_escape_string($name).'="'.mysql_escape_string($value).'" where user_id = "'.mysql_escape_string($pk).'"');
        */
 
    } else {
        /* 
        In case of incorrect value or error you should return HTTP status != 200. 
        Response body will be shown as error message in editable form.
        */
 
        header('HTTP 400 Bad Request', true, 400);
        echo "This field is required!";
    }
 
?>

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.

This site is a digital habitat of Sameer Borate, a freelance web developer working in PHP, MySQL and WordPress. I also provide web scraping services, website design and development and integration of various Open Source API's. Contact me at metapix[at]gmail.com for any new project requirements and price quotes.

1 Response

1

Jakub Vrana

January 25th, 2013 at 2:38 pm

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: http://dev.mysql.com/doc/refman/5.5/en/server-sql-mode.html#sqlmode_ansi_quotes.

Your thoughts