HTML: Editable Elements
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