added ajax voting

controllers/votes.js

@@ -11,13 +11,15 @@ exports.voteFor = function (type, root) {
     var errors = req.validationErrors();
 
     if (errors) {
-      req.flash('errors', errors);
-      return res.redirect(req.get('referrer') || root);
+      return res.send({
+        messages: errors
+      });
     }
 
     if (!req.user) {
-      req.flash('errors', { msg: 'Only members can upvote items.' });
-      return res.redirect('/signup');
+      return res.send({
+        messages: [{ msg: 'Only members can upvote items.' }]
+      });
     }
 
     var vote = new Vote({
@@ -29,15 +31,22 @@ exports.voteFor = function (type, root) {
 
     vote.save(function (err) {
       if (err) {
+        var errors = [];
+
         if (err.code === 11000) {
-          req.flash('errors', { msg: 'You can only upvote an item once.' });
+          errors.push({ msg: 'You can only upvote an item once.' });
         }
         console.warn(err);
-        return res.redirect(req.get('referrer') || root);
+
+        return res.send({
+          messages: errors,
+        });
       }
 
-      req.flash('success', { msg: 'Item upvoted. Awesome!' });
-      res.redirect(req.get('referrer') || root);
+      return res.send({
+        messages: [{ msg: 'Item upvoted. Awesome!' }],
+        success: true
+      });
     });
   };
 

public/js/main.js

@@ -1,3 +1,61 @@
+var FlashBuilder = function (type, messages) {
+  function createFlashContainer () {
+    var container = $('<div></div>')
+      .addClass('alert animated fadeIn alert-dismissable')
+      .html(createDismissButton());
+
+      switch(type) {
+        case 'success':
+          container.addClass('alert-success');
+          break;
+        case 'info':
+          container.addClass('alert-info');
+          break;
+        case 'error':
+          container.addClass('alert-danger');
+          break;
+      }
+
+      return container;
+  }
+
+  function createDismissButton () {
+    return $('<button></button>')
+      .attr('type', 'button')
+      .attr('data-dismiss', 'alert')
+      .attr('aria-hidden', true)
+      .addClass('close')
+      .text('x');
+  }
+
+  function createMessage (message) {
+    return $('<div></div>')
+      .text(message);
+  }
+
+  function clearFlash () {
+    $('#flash').empty();
+  }
+
+  function buildMessage () {
+    if (messages && messages.length > 0) {
+      clearFlash();
+
+      var container = createFlashContainer(type);
+
+      messages.forEach(function (message) {
+        container.append(createMessage(message.msg));
+      });
+
+      $('#flash').append(container);
+    }
+  }
+
+  return {
+    build: buildMessage
+  };
+};
+
 $(document).ready(function() {
 
   if ($("#url").length > 0) {
@@ -61,4 +119,27 @@ $(document).ready(function() {
     });
   }());
 
+  if ($('form.upvote-form').length > 0) {
+    $('.upvote-form').on('submit', function (e) {
+      var form = $(this);
+
+      $.post(form.attr('action'), form.serialize())
+        .done(function (data) {
+          if (data.messages) {
+            var builder = new FlashBuilder(data.success ? 'success' : 'error', data.messages);
+
+            builder.build();
+          }
+
+          if (data.success) {
+            $('button.upvote', form).remove();
+          }
+        })
+        .fail(function (data) {
+          var builder = new FlashBuilder('error', [{ msg: 'Something went wrong!'}]);
+        });
+
+      e.preventDefault();
+    });
+  }
 });

views/news/index.jade

@@ -59,7 +59,7 @@ block content
                         td.text-muted= index + 1
                         td
                             if !item.votedFor
-                                form(action='/news/' + item._id, method='POST')
+                                form(action='/news/' + item._id, method='POST', class='upvote-form')
                                     input(type='hidden', name='amount', value='1')
                                     button(type='submit', class='upvote')
                                         i.fa.fa-chevron-up