HTML: Editable Elements

HTML: Editable Elements

I’m using the following:

  1. X-editable
  2. Bootstrap 2
  3. Cakephp / Any PHP Framework

Include the jQuery, Bootstrap 2 in your HTML head

<head>
    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <!-- Bootstrap -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script src="js/bootstrap.min.js"></script>

    <!-- X-Editable -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap-editable/js/bootstrap-editable.min.js"></script>
</head>

The View

<a href="#" class="x-editable" data-type="text" data-pk="1">Some value 1</a>
<a href="#" class="x-editable" data-type="text" data-pk="2">Some value 2</a>

The JavaScript

$(document).ready(function() {
    $.fn.editable.defaults.mode = 'inline';

    $('.x-editable').editable({
        url: 'something/update'
    });
});

The Controller

<?php 
App::uses('AppController', 'Controller');

class Something extends AppController {

    public function update()
    {
        /* Data structure we received from x-editable
            Array
            (
                [name] => 
                [value] => Some value 1
                [pk] => 1
            )
        */
        $data = $this->request->data;
        $this->Some->read(null, $data['pk']);
        $this->Some->set('value', $data['value']);
        $this->Some->save();
        // return JSON if u need it or render a HTML (need to handle on success event)
    }
}
?>

References

  1. X-editable
  2. http://jquery.com/download/
  3. http://getbootstrap.com/2.3.2/getting-started.html

Angular X-editable – http://vitalets.github.io/angular-xeditable

Leave a Reply

Your email address will not be published. Required fields are marked *

2 × five =