HTML: Editable Elements
Apr
24
I’m using the following:
- X-editable
- Bootstrap 2
- 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
- X-editable
- http://jquery.com/download/
- http://getbootstrap.com/2.3.2/getting-started.html
Angular X-editable – http://vitalets.github.io/angular-xeditable