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 символов.

zepto.html 2.1KB

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