Implement AJAX flagging for todo items

[Some trailing whitespace got killed in the process. :3]

Dan: I made a few small changes including moving the jQuery include down
above the other script block; since it is not needed right away it can be
loaded later in the page.

Signed-off-by: Evangelos Foutras <foutrelis@gmail.com>
Signed-off-by: Dan McGee <dan@archlinux.org>

1 files changed, 21 insertions, 0 deletions

diff --git a/templates/todolists/view.html b/templates/todolists/view.html
index ce191fba..b85a4266 100644
--- a/templates/todolists/view.html
+++ b/templates/todolists/view.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+
 {% block content %}
 	<div class="greybox">
             <div style="float:right">
@@ -44,4 +45,24 @@
             {{list.description|linebreaks}}
         </div>
 	</div>
+
+    <script type="text/javascript" src="/media/jquery-1.4.1.min.js"></script>
+    <script type="text/javascript">
+        $(function() {
+            // Allow flagging of ToDo items using AJAX
+            $('a[href*=todo/flag]').click(function() {
+                var link = this;
+
+                $.getJSON(link.href, function(data) {
+                    if (data.complete) {
+                        $(link).text('Complete').css('color', 'blue');
+                    } else {
+                        $(link).text('Incomplete').css('color', 'red');
+                    }
+                });
+
+                return false;
+            });
+        });
+    </script>
 {% endblock %}