Sorting search result set query and rendering back via ajax
I am stuck with this issue: I have a search results page that has multiple results. I want the user to be able to sort the results based on some criteria. I am doing this in AJAX. The problem is how to map the sorted data coming from the server back to the fields again.
function sort(){
var sortid = $('#sort').val();
$.ajax({
type: "POST",
url: "/sort/",
data: { sortid: sortid },
}).done(function(data){
// how to render this sorted 'data' back to <td>s?
});
}
this is my required code:
<select onchange="sort()" id="sort">
<option>price</option>
<option>rate</option>
</select>
this is the place of the result:
<tr class="result">
<td>
<li>{{loc.locationname}}</li>
</td>
<td>
<li>{{loc.rating}}</li>
</td>
<td>
<li>{{loc.price}}</li>
</td>
</tr>
source to share
Your view can return a render fragment, which you can simply render in a div on the client side.
Your ajax call might look like this:
function sort(){
var sortid = $('#sort').val();
$.ajax({
type: "POST",
url: "/sort/",
data: { sortid: sortid },
}).done(function(data){
$('#results-div').html(data.html);
});
}
Approximate view
import json
from django.shortcuts import HttpResponse
from django.template import loader, RequestContext
def my_view(request, query=None):
# trivialized example
sortid = request.REQUEST.get('sortid')
# you might want to store the results into cache
results = MyModel.objects.filter(name__icontains=query).order_by(sortid)
if request.is_ajax():
t = loader.get_template('search_results.html')
html = t.render(RequestContext({'results': results))
return HttpResponse(json.dumps({'html': html}))
# handle the other cases here
inside search_results.html
you will just display the results in your table
{% for loc in results %}
<tr class="result">
<td>
<li>{{loc.locationname}}</li>
</td>
<td>
<li>{{loc.rating}}</li>
</td>
<td>
<li>{{loc.price}}</li>
</td>
</tr>
{% endfor %}
source to share
function(data){
var tablehtml='<tbody>'
$.each(data,function(i,res) {
tablehtml+='<tr class="result">'+
'<td><li>'+res.locationname+'</li></td>'+
//...
});
$("table").html(tablehtml+'</tbody'>)
}
nb: I added a tbody tag because this way of adding html is much faster if the html is wrapped in a single parent than if it is a (long) list of nodes
euh ... edit, but to use this, you need to indicate in .ajax that you are expecting a json ( datatype:'json'
) response , which is not the case now.
also you will need to send a specific header ("content-type: application / json") from the server
if you insist on sending the html then parse the data server side (wrap it) and add it right away in the callback
if you want to rethink your concept of sorting functions, if the data is not that big, and if you can gzip; i would load all the data right away and do the sort in js (there will be no more server call, the function will be much faster for the user: wait a bit on page load but instant sorting and then
source to share