Try to star an article with a jQuery PUT call.

2 files changed, 49 insertions, 5 deletions

diff --git a/pyaggr3g470r/templates/home.html b/pyaggr3g470r/templates/home.html
index 1290038d..2c9460df 100644
--- a/pyaggr3g470r/templates/home.html
+++ b/pyaggr3g470r/templates/home.html
@@ -99,11 +99,11 @@
                             <td class="date">{{ article.date|datetime }}</a></td>
                             <td>
                                 <a href="/delete/{{ article.id }}"><i class="glyphicon glyphicon-remove" title="{{ _('Delete this article') }}"></i></a>
-                                <a href="/like/{{ article.id }}">
+                                <a href="#">
                                 {% if article.like %}
-                                    <i class="glyphicon glyphicon-star" title="{{ _('One of your favorites') }}"></i>
+                                    <i class="glyphicon glyphicon-star like" title="{{ _('One of your favorites') }}"></i>
                                 {% else %}
-                                    <i class="glyphicon glyphicon-star-empty" title="{{ _('Click if you like this article') }}"></i>
+                                    <i class="glyphicon glyphicon-star-empty like" title="{{ _('Click if you like this article') }}"></i>
                                 {% endif %}
                                 </a>
                                 {% if article.readed %}
@@ -132,4 +132,48 @@
         {% endif %}
     </div><!-- /.container -->
 {% endif %}
+
+<script type="text/javascript" class="source">
+
+$(document).ready(function() {
+
+    // Like or unlike an article
+    $('.like').on('click', function() {
+        var article_id = $(this).parent().parent().parent().attr("data-article");
+
+        var data;
+        if ($(this).hasClass("glyphicon-star")) {
+            data = JSON.stringify({
+                like: false
+              })
+             $(this).removeClass('glyphicon-star').addClass('glyphicon-star-empty');
+        }
+        else {
+            data = JSON.stringify({
+                like: true
+              })
+            $(this).removeClass('glyphicon-star-empty').addClass('glyphicon-star');
+        }
+
+         // sends the updates to the server
+        $.ajax({
+            type: 'PUT',
+            // Provide correct Content-Type, so that Flask will know how to process it.
+            contentType: 'application/json',
+            // Encode your data as JSON.
+            data: data,
+            // This is the type of data you're expecting back from the server.
+            url: "/api/v1.0/articles/"+article_id,
+            success: function (result) {
+                //console.log(result);
+            },
+            error: function(XMLHttpRequest, textStatus, errorThrown){
+                console.log(XMLHttpRequest.responseText);
+            }
+        }); // ajax closed
+    });
+
+})
+
+</script>
 {% endblock %}
diff --git a/pyaggr3g470r/templates/layout.html b/pyaggr3g470r/templates/layout.html
index e97128f7..10b802a2 100644
--- a/pyaggr3g470r/templates/layout.html
+++ b/pyaggr3g470r/templates/layout.html
@@ -10,6 +10,8 @@ deployed on Heroku or on a traditional server." />
 
     <title>{% if head_title %}{{ head_title }} - {% endif %}pyAggr3g470r</title>
 
+    <script src="{{ url_for('.static', filename = 'js/jquery.js') }}"></script>
+
     <link rel="shortcut icon" href="{{ url_for('.static', filename='img/favicon.png') }}" />
 
     <!-- Bootstrap core CSS -->
@@ -162,8 +164,6 @@ deployed on Heroku or on a traditional server." />
 
     <!-- Bootstrap core JavaScript -->
     <!-- Placed at the end of the document so the pages load faster -->
-    <!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ -->
-    <script src="{{ url_for('.static', filename = 'js/jquery.js') }}"></script>
     <script src="{{ url_for('.static', filename = 'js/bootstrap.js') }}"></script>
   </body>
 </html>