Likes through ajax

trip_journal_app/static/javascript/story.js

@@ -1,11 +1,31 @@
 window.onload = function() {
     add_markers();
+
+    var likes = likeObjectsArray();
+    for (var i = 0; i < likes.length; i++) {
+        ( function (i) {
+            likes[i].likeLink.addEventListener('click', function(e){
+                e.preventDefault();
+                likeRequest(likes[i]);
+        }, 'false');
+        })(i);
+    }
 }
 
 var map;
 var geocoder;
 var markers = [];
 
+function getCookie(name) {
+    var value = '; ' + document.cookie;
+    var parts = value.split('; ' + name + '=');
+    if (parts.length === 2) {
+        return parts.pop().split(';').shift();
+    } else {
+        return undefined;
+    }
+}
+
 function add_markers() {
     var marker;
     var blocks = document.getElementsByClassName('saved');
@@ -63,3 +83,52 @@ function centerMap(pos) {
     map.setCenter(pos);
 }
 
+function likeObjectsArray () {
+    var likes = [].slice.call(
+            document.getElementsByClassName('like')
+        );
+    likes.push(document.getElementById('like_story'));
+    var likesObjects = [];
+    for (var i = 0; i < likes.length; i++) {
+        console.log(likes[i]);
+        likesObjects.push(formObjectToLike(likes[i]));
+    }
+    return likesObjects;
+}
+
+function formObjectToLike(element) {
+    var objToLike = {},
+        children = element.childNodes;
+    for (var i = 0; i < children.length; i++) {
+        if (children[i].className === "likes_count") {
+            objToLike.likesCount = children[i];
+        }
+        else if (children[i].tagName === 'A') {
+            objToLike.url = children[i].getAttribute("href");
+            objToLike.likeLink = children[i];
+        }
+    }
+    return objToLike;
+}
+
+/*
+* Sends like POST request to picture or story url with id of that item.
+* When the response is returned adds 'liked' class to corresponding heart.
+* objToLike should have the following properties: url, element that contains
+* like count and link element to which class "liked" should be added.
+* */
+function likeRequest(objToLike) {
+    function showNewLike() {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            var likesCount = xhr.responseText;
+            objToLike.likesCount.innerHTML = likesCount;
+            objToLike.likeLink.classList.add("liked");
+        }
+    }
+    var xhr = new XMLHttpRequest();
+    xhr.open('POST', objToLike.url);
+    xhr.onreadystatechange = showNewLike;
+    xhr.setRequestHeader('X-CSRFToken', getCookie('csrftoken'));
+    xhr.setRequestHeader('X_REQUESTED_WITH', 'XMLHttpRequest');
+    xhr.send();
+}

trip_journal_app/templates/story.html

@@ -26,9 +26,9 @@
                 by
                 <span id="author">{{ story.user }}</span>
                 <span id="like_story">
-                {{ story.likes_count }}
-                <a class="like_story_link {% if story|is_liked_by:user %}liked{% endif %}"
-                    href="{% url 'addrating' story.id %}"><span>Like</span></a>
+                    <span class="likes_count">{{ story.likes_count }}</span>
+                    <a class="like_story_link {% if story|is_liked_by:user %}liked{% endif %}"
+                        href="{% url 'like_story' story.id %}"><span>Like</span></a>
                 </span>
             </p>
         </div>

trip_journal_app/templates/story_content.html

@@ -12,10 +12,10 @@
     <img class="story_photo" src="{{ story_block.pic|get_stored_pic_by_size:800 }}">
     <p style="display:none;">{{story_block.marker}}</p>
     <p class="like">
-    <a class="like_pic_link {% if story_block.pic|is_liked_by:user %}liked{% endif %}"
-        href="/story/addrating_to_pictures/?picture={{ story_block.pic.id }}&story={{story.id}}">
+        <a class="like_pic_link {% if story_block.pic|is_liked_by:user %}liked{% endif %}"
+           href="{% url 'like_picture' story_block.pic.id %}">
         <span>Like</span></a>
-    {{ story_block.pic.likes_count }}
+        <span class="likes_count">{{ story_block.pic.likes_count }}</span>
     </p>
     {% elif page == 'edit' %}
     <p>{{ story_block.pic|get_stored_pic_by_size:800 }}</p>

trip_journal_app/urls.py

@@ -15,19 +15,21 @@
     # list of user stories
     url(r'^my_stories/$', views.user_stories, name='user_stories'),
     # add likes to stories
-    url(r'^story/addrating/(?P<story_id>\d+)/$', views.addrating,
-        name='addrating'),
+    url(r'^story/like/(?P<item_id>\d+)/$', views.like,
+        {'item_to_like': 'Story'},
+        name='like_story'),
     # add likes to pictures
-    url(r'^story/addrating_to_pictures/$', views.addrating_to_pictures,
-        name='addrating_to_pictures'),
+    url(r'^picture/like/(?P<item_id>\d+)/$', views.like,
+        {'item_to_like': 'Picture'},
+        name='like_picture'),
     # list of near by pictures
     url(r'^pictures_near_by/$', views.show_picture_near_by_page,
         name='pictures_near_by'),
     # list of nearby stories
     url(r'^stories_near_by/$', views.show_story_near_by_page,
         name='stories_near_by'),
     url(r'^search_items_near_by/', views.search_items_near_by,
-         name='search_items_near_by'),
+        name='search_items_near_by'),
     url(r'^$', views.home, name='home'),
     # toggling publish state for story
     url(r'^publish/(?P<story_id>\d+)$', views.publish, name='publish'),

trip_journal_app/views.py

@@ -164,23 +164,13 @@ def make_paging_for_items_search(request):
 
 
 @login_required
-def addrating(request, story_id):
-    story = get_object_or_404(Story, pk=int(story_id))
-    user = auth.get_user(request)
-    story.likes.add(user)
-    story.save()
-    return redirect('/story/' + str(story_id))
-
-
-@login_required
-def addrating_to_pictures(request):
-    story_id = request.GET['story']
-    picture_id = request.GET['picture']
-    pic = get_object_or_404(Picture, pk=int(picture_id))
+@require_POST
+def like(request, item_id, item_to_like):
+    item = get_object_or_404(globals()[item_to_like], pk=int(item_id))
     user = auth.get_user(request)
-    pic.likes.add(user)
-    pic.save()
-    return redirect('/story/' + str(story_id))
+    item.likes.add(user)
+    item.save()
+    return HttpResponse(item.likes_count())
 
 
 @login_required