Django. Display data with Ajax - ajax

Question

I have a list of my all posts:
def posts_list(request):
posts = Post.objects.all()
return render_to_response('posts.html', {'posts':posts},context_instance=RequestContext(request))
in template:
{% for p in posts %}
{{ p.name }}
{% endfor %}
I want post after clicking on its name shows box(div) with all information about this post(Post model: name, content, date, author)
How to do it using jquery(ajax)?
Thank you for your interest.

Answer 1

You'll need to add an additional view:
new view:
def post_content(request, post_id):
post = get_object_or_404(Post, id = post_id)
return render_to_response('post_info.html', {'post':post},context_instance=RequestContext(request))
You'll need to create a post_info.html that gives more information about a post.
in your posts template:
{% for p in posts %}
<span data-url='{% url post_content post_id=p.id %}' class='post'>{{ p.name }}<span class='more_info'></span></span>
{% endfor %}
then you'd have the following Javascript (using Jquery in this example)
$(document).ready( function () {
$('.post').on('click', function() {
var span = $(this);
$.ajax({
url: span.attr('data-url')
}).done(function(data) {
span.find('.more_info').html(data);
});
});
});
This will replace the contents of the span with class more_info with the data from the server.
Edit: You'll also need to add something to your urls.py file, with name= "post_content" set.

Answer 2

template.html:
{% for p in posts %}
<div class="container"
data-name="{{ p.name }}"
data-content="{{ p.content }}">
{{ p.name }}
</div>
{% endfor %}
script.js:
$(document).ready(function(){
$('div.container').click(function(event){
var name = $(event.target).attr('data-name');
var content = $(event.target).attr('data-content');
$.ajax({
url: 'ajax/test/',
type: 'POST',
data: {
'name': name,
'content':content
},
success: function(data) {
alert('Load was performed.');
}
});
});
});
As you can see, I store model fields as element attributes (data-name="", ...). They can be retrieved with .attr() javascript method.
Then I bind click event for all divs with class="container". On click script retrieves previously stored data and make ajax-request. Ajax calls are described in documentation. Code have not been tested, so I can not be sure in it efficiency.
If I did not understand your goal correctly, let me know