Returning Rendered Html via Ajax

Question

I am trying to return html via and Ajax call and I have the following snippet of code in my view

if request.is_ajax(): 
t = loader.get_template('frontend/scroll.html')
html = t.render(RequestContext({'dishes': dishes})
return HttpResponse(json.dumps({'html': html}))

and my Ajax

  $.ajax({
           type: "POST",
           url: "/filter_home", 
           data: {'name': 'me', 'csrfmiddlewaretoken': '{{csrf_token}}'},
           success : function(data) {
                $('.row.replace').html(data);
            }
   });

and it throws the following error

Exception Value:    'dict' object has no attribute 'META'
Exception Location: /opt/bitnami/apps/django/lib/python2.7/sitepackages/django/core/context_processors.py in debug, line 39

what am I doing wrong?

score 66 · Accepted Answer · edited Sep 25 '21 at 09:04

66

There are a few issues with your code:

You need to use render_to_string.

You also don't need to convert your HTML into json because you are replacing the contents directly.

Putting all this together you have:

from django.template.loader import render_to_string
from django.http import HttpResponse

if request.is_ajax():
    html = render_to_string('frontend/scroll.html', {'dishes': dishes})
    return HttpResponse(html)

In your front end, you need:

$.ajax({
        type: "POST",
        url: "/filter_home", 
        data: {'name': 'me', 'csrfmiddlewaretoken': '{{ csrf_token }}'},
        success : function(data) {
             $('.row.replace').html(data);
         }
});

edited Sep 25 '21 at 09:04

Denis

940
12
16

answered Sep 24 '13 at 08:26

Burhan Khalid

169,990
18
245
284

I have been getting an error, nothing has showed up on the page via ajax, I printed the error with a jquery alert and I see the following message "SyntaxError: Unexpected token <". Is ajax not recognizing the html opening tag? – Tikue Anazodo Sep 24 '13 at 09:59
1

If the AJAX call returns HTML, the trick is to use `$('#result').html(data)` instead of `$('#result').text(data)` (notice **`.html`** instead of `.text`). – Jabba Aug 12 '14 at 20:31
@jabba The issue with using .html() tag to replace the div is that you need to select the parent div first to replace the same contents inside. A better technique is to use .replaceWith – dave4jr Apr 01 '17 at 11:54

score 0 · Answer 2 · answered Sep 24 '13 at 08:23

0

The first argument of RequestContext is a request object.

You could either add the request object or use the Context class instead.

answered Sep 24 '13 at 08:23

esauro

1,276
10
17

score -1 · Answer 3 · answered Sep 24 '13 at 08:24

-1

First parameter to RequestContext() should be request, so update line in your code as

html = t.render(RequestContext(request, {'dishes': dishes})

answered Sep 24 '13 at 08:24

Rohan

52,392
12
90
87

Returning Rendered Html via Ajax

3 Answers3

Linked