Login

jQuery ajax search

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

  1. Django Collapsed Stacked Inlines by applecat 1 year, 1 month ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 2 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 8 years, 10 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 10 years, 11 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 11 years, 3 months ago

Comments

Please login first before commenting.