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.