How do I display ajax response on particular div? This statement worked alert(data[i]['title']);
but I want to display on div. thanks
<td><a onclick="ajax_request('{% url recommendation id=track.id %}');" href="#"> Click Here</a></td>
Ajax Function
function ajax_request(url) {
$.ajax({
url: url,
type: 'POST',
data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
success: function(data) {
for(i=0;i<=data.length;i++){
alert(data[i]['title']);
}
}
})
}
View
@login_required
def recommendation(request, id):
if request.is_ajax() and request.method == 'POST':
track = Track.objects.get(pk=id)
recommend = Song.objects.filter(title__icontains=track.title)[:5]
results = []
for data in recommend:
results.append({'title': data.title})
json = simplejson.dumps(results)
return HttpResponse(json, mimetype="application/json")
Hm, depending if you already have a div you want to display the content in or you create a new one with jQuery:
Existing one with id myDiv
:
$('#myDiv').html(data[i]['title']); //also $('#myDiv').text(data[i]['title']) possible
Create new div:
$('<div/>').html((data[i]['title']);
You need to modify your onsuccess event like this
$.ajax({
url: url,
type: 'POST',
data: {csrfmiddlewaretoken: '{{ csrf_token }}'},
success: function(data) {
for(i=0;i<=data.length;i++)
$('#div').html(data[i]['title']);//Your success msg
}
});