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 3 years ago
  2. Django Collapsed Stacked Inlines by mkarajohn 5 years, 2 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 10 years, 10 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 12 years, 11 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 13 years, 3 months ago

Comments

Please login first before commenting.