Deleting microupdates with jquery + ajax

src/collective/liveblog/browser/microupdates.py

@@ -10,6 +10,8 @@
 from zope.event import notify
 from zope.lifecycleevent import ObjectModifiedEvent
 
+import json
+
 grok.templatedir('templates')
 
 
@@ -53,6 +55,7 @@ class DeleteMicroUpdateView(grok.View):
 
     def render(self):
         id = self.request.form.get('id', None)
+        is_ajax = self.request.form.get('ajax', None)
         if not id:
             msg = _(u'There were some errors. Required input is missing.')
             api.portal.show_message(msg, self.request, type='error')
@@ -80,6 +83,11 @@ def render(self):
                 self.context._last_microupdate_deletion = _timestamp(deleted)
                 msg = _(u'Item deleted.')
                 api.portal.show_message(msg, self.request)
-
-        update_url = self.context.absolute_url() + '/update'
-        self.request.response.redirect(update_url)
+        if not is_ajax:
+            update_url = self.context.absolute_url() + '/update'
+            self.request.response.redirect(update_url)
+        else:
+            self.request.response.setHeader('Content-Type', 'application/json')
+            return json.dumps({
+                'msg': msg, 'container': '#microupdate-{0}'.format(id)
+            })

src/collective/liveblog/browser/templates/update.pt

@@ -53,12 +53,13 @@
     <section id="micro-updates">
       <article class="microupdate" data-timestamp="" itemprop="comment" itemscope itemtype="http://schema.org/Comment"
           tal:repeat="update view/updates"
-          tal:attributes="data-timestamp update/timestamp">
+          tal:attributes="data-timestamp update/timestamp;
+                          id string:microupdate-${update/id};">
         <div class="microupdate-helpers">
           <a href="@@delete-microupdate"
+              class="microupdate_delete"
               tal:condition="view/can_delete_objects"
-              tal:attributes="href string:@@delete-microupdate?id=${update/id};
-                              onclick view/delete_confirmation"
+              tal:attributes="href string:@@delete-microupdate?id=${update/id};"
               i18n:translate="">Delete</a>
         </div>
         <h2 class="microupdate-title" itemprop="headline"
@@ -98,6 +99,34 @@
         </dd>
     </dl>
 
+    <script type="text/javascript" tal:content="view/delete_confirmation_variable">
+    </script>
+
+    <script type="text/javascript">
+      $(function(){
+         $(".microupdate_delete").click(function(){
+              var original_url = this.href + '&ajax=1';
+              //do the AJAX request to your server-side script
+              if (confirm(delete_confirmation)){
+                $.ajax({
+                    url     : original_url,
+                    type    : 'get',
+                    success : function (response) {
+                        var container = response["container"];
+                        $(container).fadeOut("slow"), function(){
+                          $(this).remove();
+                        }
+                    },
+                    error  : function (response) {
+                        alert('Something happened');
+                    }
+                });
+              }
+              return false;
+         });
+      });
+    </script>
+
     <script type="text/javascript" tal:condition="view/automatic_updates_enabled">
         /* show dates for micro-updates older than today */
         var today = new Date().toISOString().substr(0, 10);

src/collective/liveblog/browser/update.py

@@ -21,7 +21,15 @@ class Update(View):
     def can_delete_objects(self):
         return checkPermission('zope2.DeleteObjects', self.context)
 
-    def delete_confirmation(self):
+    def delete_confirmation_message(self):
         msg = _(u'Do you really want to delete this item?')
         msg = translate(msg, 'collective.liveblog', context=self.request)
+        return msg
+
+    def delete_confirmation_variable(self):
+        msg = self.delete_confirmation_message()
+        return u"delete_confirmation = '{0}';".format(msg)
+
+    def delete_confirmation(self):
+        msg = self.delete_confirmation_message()
         return u"return confirm('{0}')".format(msg)