Pinkie Pie
Pinkie Pie

Reputation: 71

How do I get JQuery/AJAX results to work with render_to_response

I'm having trouble getting the results from my view to display. It works when I do a regular HttpResponse, but I don't know how to make it work for render_to_response

Any help is much appreciated.

Here's my code:

JQuery/AJAX

function ajaxTest() { 
    $.ajax({
        type: 'POST',
        url: '/trivia/ajax_test/',
        data: {
              recipient: document.getElementById("id_recipient").value,
              message: document.getElementById("id_message").value
              },
        success: function(result){$("#messageTable").find("tbody").append(result);} 
    });

    return false;
}

MAIN HTML

<table id="messageTable">
<thead>
 ...
</thead>
<tbody>
...
{% include "trivia/trivia_ajax_messages.html" %}
</tbody>
</table>

INCLUDE -- trivia/trivia_ajax_messages.html

{% for message in ajax_messages %}
...
{{ message.message }}
{% endfor %}

urls.py

(r'^trivia/ajax_test/$', 'findadownload.trivia.views.ajax_test'),

views.py

@csrf_exempt
def ajax_test(request):
    if request.is_ajax():
        profile = Profile.objects.get(user=request.user)
        # data received via AJAX
        recipient = request.POST.get('recipient', False)
        message = request.POST.get('message', False)
        # create a new Message
        msg = Message(sender=profile,
                          recipient=Profile.objects.get(user__username=recipient),
                          message=message)
        msg.save()

        # get messages
        get_messages = chain(Message.objects.filter(sender=profile),
                            Message.objects.filter(recipient=profile))
        message_list =  sorted(get_messages, key=lambda instance: instance.last_modified, reverse=True)

        return render_to_response('trivia_ajax_messages.html', {'ajax_messages': message_list})

    return HttpResponse("Something went wrong")

Upvotes: 0

Views: 522

Answers (1)

catherine
catherine

Reputation: 22808

function ajaxTest() { 
    $.ajax({
        type: 'POST',
        url: '/trivia/ajax_test/',
        data: {
              recipient: document.getElementById("id_recipient").value,
              message: document.getElementById("id_message").value
              },
        success: function(result){
            var html = $(result);
            $("#messageTable").find("tbody").clear().append('<tr><td>' + html + '</td></tr>');
        } 
    });

    return false;
}


@csrf_exempt
def ajax_test(request):
    if request.is_ajax():
        //other codes here

        return render_to_response('trivia_ajax_messages.html', {
            'ajax_messages': message_list
        }, context_instance=RequestContext(request))

    return HttpResponse("Something went wrong")

Upvotes: 1

Related Questions