Refresh a div in Django using JQuery and AJAX

Question

I am trying to refresh a certain part of my page with AJAX and JQuery (in Django). How can I get it to redisplay only the div, rather than the whole page.

    // In my template
    var tag_cloud_floor = function(floor) {
    $.ajax({ url: "/{{ user }}/{{ tag }}/",
                     data: {tag_cloud_floor: floor},
                     type: 'POST',
                     success: function(data) {
                         $('#tag_cloud).html(data);
                     },
    });

};

Here is my view.

@login_required
def tag_page(request, username, tag):
  if username == request.user.username:
    tags = request.user.userprofile.tag_set.all()

    if request.is_ajax() and request.POST:
      floored_tags = []
      for t in tags:
        if t.item_set.all().count() >= int(request.POST['tag_cloud_floor']):
          floored_tags.append(t)
      tags = floored_tags

    tag = Tag.objects.get(title=tag)
    items = tag.item_set.all()
    return render_to_response("tag_page.html", { 'user': request.user , 
                                              'tag': tag,
                                             'tags': tags,
                                            'items': items })
  else:
  return HttpResponseRedirect('/' + request.user.username + '/')

Currently, it places the entire html page into the #tag_page div. I want it to replace the old #tag_page div with the new #tag_page div. If I replace $('#tag_cloud').html(data); with $('body').html(data); it refreshes the whole page to how it should be, but I figure refreshing the whole page is a waste.

If there is a better way to do this, let me know.

Answer 1

Use load:

$('#tag_cloud').load(' #tag_cloud')

(Note the leading space in the load parameter; this specifies an empty string [which evaluates to the current page] as the source, and "#tag_cloud" as the fragment to load)

This will actually load #tag_cloud (including its outer html) into #tag_cloud, so you'll essentially get the following structure in your DOM:

<div id="tag_cloud">
    <div id="tag_cloud">
        <span>tag</span> ...

To fix this, just unwrap the children:

$('#tag_cloud').load(' #tag_cloud', function(){$(this).children().unwrap()})

---

Oh, by the way... you can try this here on SO! Just paste the following into your Firebug console, and watch the sidebar auto-reload. You'll notice some scripting code poking through; that's jQ's HTML-safety filters disabling the <script> elements for you (which can be annoying at times).

$('#sidebar').load(' #sidebar', function(){$(this).children().unwrap()})