django - how to render part of html as ajax response

Question

I am stuck in this issue. I have a page where user can search and go to search-results page. Now I want that user is able to sort the result by some criteria, i am using ajax for this because i dont want the page be loaded again

my ajax:

function sort(){
 var sortid = $('#sort').val().toLowerCase();
 $.ajax({
    type:"GET",
    url: "/sort/",
    data: {sortid:sortid}
 });
}

and this is my view:

def sort(request):
  sortid = request.GET.get('sortid')
  ratings = Bewertung.objects.order_by(sortid)
  locations = Location.objects.filter(locations_bewertung__in=ratings)
  t = loader.get_template('result-page.html')
  c = Context({ 'locs': locations })
  return HttpResponse(t.render(c))

but now, nothing is changing on the page once i sort the results. why is that loaded template with new queryset rendered not coming up? I thought, without ajax's done function, The Page will be replaced.

can someone please explain me why this is happening?

thanks a lot

Answer 1

After verifying in your browser's request inspector that you are receiving the data you expect from your ajax call, you should tell jQuery ajax what to do with the new html when you get it from the server.

function sort(){
 var sortid = $('#sort').val().toLowerCase();
 $.ajax({
    type:"GET",
    url: "/sort/",
    data: {sortid: sortid},
    success: function(newData){
        $('#selector-that-you-care-about').html(newData);
    }
 });
}