- Author:
- Peidor
- Posted:
- March 2, 2007
- Language:
- JavaScript
- Version:
- Not specified
- Score:
- 5 (after 5 ratings)
This is the result of my first tests with jQuery and Django.
After entering a search term it gets search results using ajax and json. Then is uses the rather crude result_table
function to generate a table of results.
Django is on the serverside for generating json
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | $(document).ready(function(){
ajax_search();
$("#throbber").html('<img alt="loading..." src="/img/throbber.gif" />').hide();
$("#sendFormButton").click(function(e){
e.preventDefault();
ajax_search();
});
$("#searchFormField").keyup(function(e){
e.preventDefault();
ajax_search();
});
$("#winkelFormSelect").change(function(e){
e.preventDefault();
ajax_search();
});
});
var timeout = null;
function ajax_search() {
if (timeout) clearTimeout(timeout);
timeout = setTimeout(function(){
$("#throbber").show();
$("#results").slideUp(); //Hide results DIV
var search_val=$("#searchFormField").val()
var winkel_id=$("#winkelFormSelect").val()
var ajax_search_REQ=$.post("./json/", {search: search_val, winkel: winkel_id },function(jsondata){
if (ajax_search_REQ) {ajax_search_REQ.abort();}
$("#results").html(result_table(jsondata,search_val,winkel_id)).slideDown();
$("#results table").tableSorter({
sortColumn: 'name', // Integer or String of the name of the column to sort by.
sortClassAsc: 'headerSortUp', // Class name for ascending sorting action to header
sortClassDesc: 'headerSortDown', // Class name for descending sorting action to header
headerClass: 'header', // Class name for headers (th's)
stripingRowClass: ['even','odd'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
$("#results table tr").hover(
function() { $(this).addClass("hover"); },
function() { $(this).removeClass("hover"); }
);
$("#throbber").hide();
},"json");
}, 400);
}
function result_table(jsondata,search_val,winkel_id) {
var aantal = jsondata.length
if (aantal == 0) {
return '<b>Geen producten gevonden</b>';
}
else {
if (aantal == 1) {html='<b>1 product gevonden</b>';}
else {html='<b>'+aantal+' producten gevonden</b>';}
html_table='<table>';
html_table+='<tr><th>Naam</th><th>Prijs</th>';
if (winkel_id == 0) {
html_table+='<th>Winkel</th>';
}
html_table+='<th>Omschrijving</th></tr>';
for (i in jsondata){
html_table+='<tr><td class="naam">';
html_table+=jsondata[i].naam;
html_table+='</td><td class="prijs">';
html_table+=jsondata[i].prijs;
html_table+='</td><td>';
if (winkel_id == 0) {
html_table+='<a class="winkel" href="'+jsondata[i].set.get_absolute_url+'">'+jsondata[i].set.winkel+'</a>';
html_table+='</td><td>';
}
html_table+=jsondata[i].omschrijving;
html_table+='</td></tr>';
}
html_table+='</table>';
html+=html_table
return html;
}
}
|
More like this
- Django Collapsed Stacked Inlines by applecat 1 year, 9 months ago
- Django Collapsed Stacked Inlines by mkarajohn 3 years, 10 months ago
- Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 6 months ago
- Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 7 months ago
- Django admin inline ordering - javascript only implementation by ojhilt 11 years, 11 months ago
Comments
Please login first before commenting.