api de gestion de ticket, basé sur php-crud-api. Le but est de décorrélé les outils de gestion des données, afin
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

client_zepto.html 2.1KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <html>
  2. <head>
  3. <script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
  4. <script src="../lib/php_crud_api_transform.js"></script>
  5. <script id="PostListTemplate" type="text/html">
  6. <ul>
  7. <li>
  8. <span class="id"></span>, <span class="content"></span>
  9. <a href="javascript:void(0)" class="edit">edit</a>
  10. <a href="javascript:void(0)" class="delete">del</a>
  11. </li>
  12. <li>
  13. <form>
  14. <input name="content"/>
  15. </form>
  16. </li>
  17. </ul>
  18. </script>
  19. <script>
  20. function PostList(element,template) {
  21. var self = this;
  22. var url = '../api.php/posts';
  23. self.edit = function() {
  24. var li = $(this).parent('li');
  25. var id = li.find('span.id').text();
  26. var content = li.find('span.content').text();
  27. content = prompt('Value', content);
  28. if (content!==null) {
  29. $.ajax({url: url + '/' + id, type: 'PUT', data: {content: content}, success: self.update});
  30. }
  31. };
  32. self.delete = function() {
  33. var li = $(this).parent('li');
  34. var id = li.find('span.id').text();
  35. if (confirm("Deleting #" + id + ". Continue?")) {
  36. $.ajax({url: url + '/' + id, type: 'DELETE', success: self.update});
  37. }
  38. };
  39. self.submit = function(e) {
  40. e.preventDefault();
  41. var content = $(this).find('input[name="content"]').val();
  42. $.post(url, {user_id: 1, category_id: 1, content: content}, self.update);
  43. };
  44. self.render = function(data) {
  45. data = php_crud_api_transform(data);
  46. element.html(template.html());
  47. var item = element.find('li').first().remove();
  48. for (var i=0;i<data.posts.length; i++) {
  49. var clone = item.clone();
  50. clone.find('span').each(function(){
  51. var field = $(this).attr("class");
  52. $(this).text(data.posts[i][field]);
  53. });
  54. clone.insertBefore(element.find('li').last());
  55. }
  56. };
  57. self.update = function() {
  58. $.get(url, self.render);
  59. };
  60. self.post = function() {
  61. $.post(url, {user_id: 1, category_id: 1, content: "from zepto"}, self.update);
  62. };
  63. element.on('submit', 'form', self.submit);
  64. element.on('click', 'a.edit', self.edit);
  65. element.on('click', 'a.delete', self.delete);
  66. self.post();
  67. };
  68. $(function(){
  69. new PostList($('#PostListDiv'), $('#PostListTemplate'));
  70. });
  71. </script>
  72. </head>
  73. <body>
  74. <div id="PostListDiv">Loading...</div>
  75. </body>
  76. </html>