Question

I am using Django and AJAX in a project where I am building an activity feed. The way it works, we show both friend activity and global activity. This is what my HTML looks like:

<div>
  {% include "friend_reviews.html" %}
  <div id="load-friends"></div>
</div>
<div>
  {% include "global_reviews.html" %}
  <div id="load-global"></div>
</div>
<a id="load-more" href="/load/feed/2">
  Load More
</a>

I want to write a jQuery AJAX function that will load additional reviews into #load-friend and #load-global. Consequently, I wrote a Django view (which intercepts /load/feed/2) that queries the database and returns:

context = {'friend_reviews': friend_reviews, 'global_reviews': global_reviews'}

Both friend_reviews and global_reviews are QuerySets of Review objects. If you plug friend_reviews into the friend_reviews.html partial template, then it will generate the appropriate HTML on the page.

However, I am not that familiar with jQuery and do not know what’s the best way to generate the correct HTML. I have heard about Taconite but there are no examples in Python so any help would be greatly appreciated.

Answer 1

Include jquery library in the head of your page.

Then, this will do the job :

$(document).ready(function(){   
    $.get("friend_reviews.html",function(data){     
            $('#load-friends').html(data);
      });
    $.get("global_reviews.html",function(data){     
            $('#load-global').html(data);
      });
});

If you want to do it by clicking on the link then you can use following

// html
<a id="load-more">Load More</a> 

// Javascript
$(document).ready(function(){
    $('#load-more').click(function(){
    $.get("friend_reviews.html",function(data){     
            $('#load-friends').html(data);
      });
    $.get("global_reviews.html",function(data){     
            $('#load-global').html(data);
      });
                                   });
});