Refactor related delete button

Removed the inline click handlers and moved the JavaScript into application.js. Also remove the item with JavaScript rather than reload the page.
ckan · Apr 30, 2012 · 762906d · 762906d
1 parent 289a367
commit 762906d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 35 deletions.
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
@@ -1145,8 +1145,22 @@ CKAN.Utils = function($, my) {
       $('<div class="alert alert-error" />').html(msg).hide().prependTo(form).fadeIn();
     }
 
+    function relatedRequest(action, method, data) {
+      return $.ajax({
+        type: method,
+        dataType: 'json',
+        contentType: 'application/json',
+        url: CKAN.SITE_URL + '/api/3/action/related_' + action,
+        data: data ? JSON.stringify(data) : undefined,
+        error: function(err, txt, w) {
+          // This needs to be far more informative.
+          addAlert('<strong>Error:</strong> Unable to ' + action + ' related item');
+        }
+      });
+    }
+
     // Center thumbnails vertically.
-    $('.related-items').each(function () {
+    var relatedItems = $('.related-items').each(function () {
       var item = $(this);
 
       function vertiallyAlign() {
@@ -1164,6 +1178,15 @@ CKAN.Utils = function($, my) {
       item.find('.description').truncate();
     });
 
+    // Add a handler for the delete buttons.
+    relatedItems.on('click', '[data-action=delete]', function (event) {
+      var id = $(this).data('relatedId');
+      relatedRequest('delete', 'POST', {id: id}).done(function () {
+        $('#related-item-' + id).remove();
+      });
+      event.preventDefault();
+    });
+
     $(form).submit(function (event) {
       event.preventDefault();
 
@@ -1186,18 +1209,10 @@ CKAN.Utils = function($, my) {
         return;
       }
 
-      $.ajax({
-        type: this.method,
-        url: CKAN.SITE_URL + '/api/3/action/related_create',
-        data: JSON.stringify(data),
-        success: function (data) {
-          window.location.reload();
-        },
-        error: function(err, txt, w) {
-          // This needs to be far more informative.
-          addAlert('<strong>Error:</strong> Unable to add related item');
-        }
-      }); 
+      relatedRequest('create', this.method, data).done(function () {
+        // TODO: Insert item dynamically.
+        window.location.reload();
+      });
     });
   };
 

diff --git a/ckan/templates/_util.html b/ckan/templates/_util.html
@@ -126,16 +126,16 @@
 
 
   <py:def function="related_summary(related)">
-    <li class="span3">
+  <li id="related-item-${related.id}" class="span3">
       <div class="thumbnail">
-        <button py:if="c.user and (c.userobj.id == related.owner_id or h.check_access('package_update',{'id':c.pkg.id}))" class="close" onclick="related_delete('${related.id}');">×</button>
+        <button py:if="c.user and (c.userobj.id == related.owner_id or h.check_access('package_update',{'id':c.pkg.id}))" class="close" data-action="delete" data-related-id="${related.id}">×</button>
         <a href="${related.url}" class="image">
           <img src="${related.image_url}" width="210" py:if="related.image_url" />
           <img src="/images/photo-placeholder.png" width="210" py:if="not related.image_url" />
         </a>
         <div class="caption">
           <h5 class="heading" title="${related.title}">${h.markdown_extract(related.title, extract_length=30)}</h5>
-          <div class="description" data-truncate="60" py:if="related.description">${h.markdown_extract(related.description, extract_length=1000)}</div>
+          <div class="description" data-truncate="55" py:if="related.description">${h.markdown_extract(related.description, extract_length=1000)}</div>
           <i class="empty" py:if="not related.description">No description for this item</i>
           <p class="read-more"><a href="${related.url}">View this related item</a></p>
         </div>

diff --git a/ckan/templates/package/related_list.html b/ckan/templates/package/related_list.html
@@ -40,25 +40,6 @@ <h3>Related items <a class="btn btn-small btn-primary pull-right" data-toggle="m
   </div>
 
   <py:def function="optional_head">
-    <script type="text/javascript" py:if="c.user">
-        function related_delete(related_id) {
-          var data = { 'id' : related_id }
-          $.ajax({
-            type: "post",
-            url: CKAN.SITE_URL + '/api/3/action/related_delete',
-            data: JSON.stringify(data),
-            success: function (data) {
-              window.location.reload();
-            },
-            error: function(err, txt, w) {
-              // This needs to be far more informative.
-              var msg = '<strong>Error:</strong> Unable to delete related item';
-              $('<div class="alert alert-error" />').html(msg).hide().prependTo($('div#main')).fadeIn();
-            }
-          });
-
-        }
-    </script>
     <py:if test="config.get('rdf_packages')">
       <link rel="alternate" type="application/rdf+xml" title="RDF/XML" href="${config['rdf_packages'] + '/' + c.pkg.id + '.rdf' }" />
       <link rel="alternate" type="application/turtle" title="RDF/Turtle" href="${config['rdf_packages'] + '/' + c.pkg.id + '.ttl' }" />