We need to add the AJAX functionality to our image detail template. In order to use jQuery in our templates, we are going to include it in the base.html template of our project first. Edit the base.html template of the account application and include the following code before the closing </body> HTML tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    {% block domready %}
    {% endblock %}
     });
</script>

We load the jQuery framework from Google, which hosts popular JavaScript frameworks in a high-speed reliable content delivery network. You can also download jQuery from http://jquery.com/ and add it to the static directory of your application.

We add a <script> tag to include JavaScript code. $(document).ready() is a jQuery function that takes a handler that is executed when the DOM hierarchy has been fully constructed. DOM comes from Document Object Model. The DOM is created by the browser when a webpage is loaded, and it is constructed as a tree of objects. By including our code inside this function we make sure all HTML elements we are going to interact with are loaded in the DOM. Our code will be only executed once the DOM is ready.

Inside the document ready handler function, we include a Django template block called domready, in which templates that extend the base template will be able to include specific JavaScript.

Don't get confused with JavaScript code and Django template tags. Django template language is rendered in the server side outputting the final HTML document and JavaScript is executed in the client side. In some cases, it is useful to generate JavaScript code dynamically using Django.

You have learned about Cross-Site Request Forgery in Chapter 2, Enhancing Your Blog With Advanced Features. With the CSRF protection active, Django checks for a CSRF token in all POST requests. When you submit forms you can use the {% csrf_token %} template tag to send the token along with the form. However, it is a bit inconvenient for AJAX requests to pass the CSRF token as POST data in with every POST request. Therefore, Django allows you to set a custom X-CSRFToken header in your AJAX requests with the value of the CSRF token. This allows you to set up jQuery or any other JavaScript library, to automatically set the X-CSRFToken header in every request.

In order to include the token in all requests, you need to:

You can find more information about CSRF protection and AJAX at https://docs.djangoproject.com/en/1.8/ref/csrf/#ajax.

Edit the last code you included in your base.html template and make it look like the following:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src=" http://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js "></script>
<script>
  var csrftoken = $.cookie('csrftoken');
  function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }
  $.ajaxSetup({
    beforeSend: function(xhr, settings) {
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
        xhr.setRequestHeader("X-CSRFToken", csrftoken);
      }
    }
  });
  $(document).ready(function(){
    {% block domready %}
    {% endblock %}
  });
</script>

The code above is as follows:

The CSRF token will be included in all AJAX request that use unsafe HTTP methods such as POST or PUT.

Edit the images/image/detail.html template of the images application and replace the following line:

{% with total_likes=image.users_like.count %}

With the following one:

{% with total_likes=image.users_like.count users_like=image.users_like.all %}

Then modify the <div> element with the image-info class as follows:

<div class="image-info">
  <div>
    <span class="count">
      <span class="total">{{ total_likes }}</span>
      like{{ total_likes|pluralize }}
    </span>
    <a href="#" data-id="{{ image.id }}" data-action="{% if request.user in users_like %}un{% endif %}like" class="like button">
      {% if request.user not in users_like %}
        Like
      {% else %}
        Unlike
      {% endif %}
    </a>
  </div>
  {{ image.description|linebreaks }}
</div>

First, we add another variable to the {% with %} template tag to store the results of the image.users_like.all query and avoid executing it twice. We display the total number of users that like this image and include a link to like/unlike the image: We check if the user is in the related object set of users_like to display either like or unlike based on the current relationship of the user and this image. We add the following attributes to the <a> HTML element:

We will send the value of both attributes in the AJAX request to the image_like view. When a user clicks the like/unlike link, we need to perform the following actions on the client side:

Add the domready block at the bottom of the images/image/detail.html template with the following JavaScript code:

{% block domready %}
  $('a.like').click(function(e){
    e.preventDefault();
    $.post('{% url "images:like" %}',
      {
        id: $(this).data('id'),
        action: $(this).data('action')
      },
      function(data){
        if (data['status'] == 'ok')
        {
          var previous_action = $('a.like').data('action');
                   
          // toggle data-action
          $('a.like').data('action', previous_action == 'like' ? 'unlike' : 'like');
          // toggle link text
          $('a.like').text(previous_action == 'like' ? 'Unlike' : 'Like');
                   
          // update total likes
          var previous_likes = parseInt($('span.count .total').text());
          $('span.count .total').text(previous_action == 'like' ? previous_likes + 1 : previous_likes - 1);              
        }
      }
    );
  });
{% endblock %}

This code works as follows:

Open the image detail page in your browser for an image you have uploaded. You should be able to see the following initial likes count and the LIKE button as follows:

Click the LIKE button. You will see that the total likes count increases in one and the button text changes into UNLIKE like this:

When you click the UNLIKE button the action is performed, the button's text changes back to LIKE and the total count changes accordingly.

When programming JavaScript, especially when performing AJAX requests, it is recommended to use a tool such as Firebug for debugging. Firebug is a Firefox add-on that allows you to debug JavaScript and monitor CSS and HTML changes. You can download Firebug from http://getfirebug.com/. Other browsers such as Chrome or Safari also include developer tools to debug JavaScript. In those browsers you can right-click anywhere in the website and click on Inspect element to access the web developer tools.