Use button instead of link for delete form.

mozilla · Sep 14, 2012 · 725d08b · 725d08b
1 parent 00398db
commit 725d08b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/apps/facebook/templates/facebook/banner_list.html b/apps/facebook/templates/facebook/banner_list.html
@@ -38,12 +38,12 @@ <h3 class="number">{{ loop.index }}</h3>
             </a>
           </li>
           <li>
-            <form method="post" action="{{ url('facebook.banners.delete') }}">
+            <form class="delete-banner" method="post" action="{{ url('facebook.banners.delete') }}">
               {{ csrf() }}
               <input type="hidden" name="banner_instance" value="{{ banner_instance.id }}">
-              <a class="delete-banner" href="#">
+              <button class="link" type="submit">
                 {{ _('Delete') }}
-              </a>
+              </button>
             </form>
           </li>
         </ul>

diff --git a/media/css/facebook.css b/media/css/facebook.css
@@ -159,17 +159,27 @@ h6,
 
 /* @Links ***/
 a:link,
-a:visited {
+a:visited,
+.link {
   color: #2983c8;
   text-decoration: none;
 }
 a:hover,
 a:focus,
-a:active {
+a:active,
+.link:hover {
   color: #20679e;
   text-decoration: underline;
 }
 
+.link {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  padding: 0;
+}
+
 /* @Header */
 .head hgroup {
   width: 480px;

diff --git a/media/js/facebook/banner_delete.js b/media/js/facebook/banner_delete.js
@@ -1,12 +1,12 @@
 (function($) {
     'use strict';
 
-    var confirmMsg = $('.banner-list').data('deleteConfirm');
+    var $banner_list = $('.banner-list');
+    var confirmMsg = $banner_list.data('deleteConfirm');
 
-    $(document).on('click', '.delete-banner', function(e) {
-        e.preventDefault();
-        if (window.confirm(confirmMsg)) {
-            $(e.target).parent('form').submit();
+    $banner_list.on('submit', '.delete-banner', function(e) {
+        if (!window.confirm(confirmMsg)) {
+            e.preventDefault();
         }
     });
 })(jQuery);