Refactor voting JS for better separation of concerns

2 files changed, 20 insertions, 15 deletions

diff --git a/hyperkitty/static/js/hyperkitty.js b/hyperkitty/static/js/hyperkitty.js
index becc171..99d16b7 100644
--- a/hyperkitty/static/js/hyperkitty.js
+++ b/hyperkitty/static/js/hyperkitty.js
@@ -37,10 +37,11 @@ function form_to_json(form) {
  * Voting
  */
 
-function vote(elem, value) {
+function vote(elem) {
     if ($(elem).hasClass("disabled")) {
-        return false;
+        return;
     }
+    var value = parseInt($(elem).attr("data-vote"));
     var form = $(elem).parents("form").first();
     var data = form_to_json(form);
     data['vote'] = value;
@@ -50,21 +51,25 @@ function vote(elem, value) {
         dataType: "json",
         data: data,
         success: function(response) {
-            form.replaceWith(response.html);
+            var newcontent = $(response.html);
+            form.replaceWith(newcontent);
+            setup_vote(newcontent); // re-bind events
         },
         error: function(jqXHR, textStatus, errorThrown) {
             alert(jqXHR.responseText);
         }
     });
-    return false;
 }
 
 
-function setup_vote() {
-    /*
-    $("a.youlike").click(function(e) { e.preventDefault(); vote(this, 1); });
-    $("a.youdislike").click(function(e) { e.preventDefault(); vote(this, -1); });
-    */
+function setup_vote(baseElem) {
+    if (!baseElem) {
+        baseElem = document;
+    }
+    $(baseElem).find("a.vote").click(function(e) {
+        e.preventDefault();
+        vote(this);
+    });
 }
 
 
diff --git a/hyperkitty/templates/messages/like_form.html b/hyperkitty/templates/messages/like_form.html
index 14b8f88..bf7a5ba 100644
--- a/hyperkitty/templates/messages/like_form.html
+++ b/hyperkitty/templates/messages/like_form.html
@@ -6,15 +6,15 @@
 	<span class="likestatus {{ object.likestatus }}">+{{ object.likes }}/-{{ object.dislikes }}</span>
 	{% if object.myvote == 1 %}
 	<span class="youlike">You like it
-		(<a href="#cancelvote" onclick="vote(this, 0)">cancel</a>)</span>
+		(<a href="#cancelvote" class="vote" data-vote="0">cancel</a>)</span>
 	{% elif object.myvote == -1 %}
 	<span class="youdislike">You dislike it
-		(<a href="#cancelvote" onclick="vote(this, 0)">cancel</a>)</span>
+		(<a href="#cancelvote" class="vote" data-vote="0">cancel</a>)</span>
 	{% else %}
-	<a class="youlike{% if not user.is_authenticated %} disabled" title="You must be logged-in to vote.{% endif %}"
-	   href="#like" onclick="vote(this, 1)">Like</a>
-	<a class="youdislike{% if not user.is_authenticated %} disabled" title="You must be logged-in to vote.{% endif %}"
-	   href="#dislike" onclick="vote(this, -1)">Dislike</a>
+	<a class="youlike vote{% if not user.is_authenticated %} disabled" title="You must be logged-in to vote.{% endif %}"
+	   href="#like" data-vote="1">Like</a>
+	<a class="youdislike vote{% if not user.is_authenticated %} disabled" title="You must be logged-in to vote.{% endif %}"
+	   href="#dislike" data-vote="-1">Dislike</a>
 	{% endif %}
 	</form>