Refactor search logic to trigger with jQuery instead of inserting

attributes directly, moving it to a separate JS file; fixes a bug in
the new schema
 - Legacy-Id: 3927

Author: OleLaursen

ietf/idrfc/views_search.py

@@ -43,35 +43,21 @@
 from ietf.utils import normalize_draftname
 from django.conf import settings
 
-def addInputEvents(widget):
-    widget.attrs["oninput"] = 'inputEvent()'
-    widget.attrs["onpropertychange"] = 'propertyChange()'
-
-def addChangeEvent(widget):
-    widget.attrs["onchange"] = 'changeEvent()'
-
 class SearchForm(forms.Form):
     name = forms.CharField(required=False)
-    addInputEvents(name.widget)
     rfcs = forms.BooleanField(required=False,initial=True)
     activeDrafts = forms.BooleanField(required=False,initial=True)
     oldDrafts = forms.BooleanField(required=False,initial=False)
     lucky = forms.BooleanField(required=False,initial=False)
 
     by = forms.ChoiceField(choices=[(x,x) for x in ('author','group','area','ad','state')], required=False, initial='wg', label='Foobar')
     author = forms.CharField(required=False)
-    addInputEvents(author.widget)
     group = forms.CharField(required=False)
-    addInputEvents(group.widget)
     area = forms.ModelChoiceField(Area.active_areas(), empty_label="any area", required=False)
-    addChangeEvent(area.widget)
     ad = forms.ChoiceField(choices=(), required=False)
-    addChangeEvent(ad.widget)
     state = forms.ModelChoiceField(IDState.objects.all(), empty_label="any state", required=False)
-    addChangeEvent(state.widget)
     subState = forms.ChoiceField(choices=(), required=False)
-    addChangeEvent(subState.widget)
-        
+
     def __init__(self, *args, **kwargs):
         super(SearchForm, self).__init__(*args, **kwargs)
         self.fields['ad'].choices = [('', 'any AD')] + [(ad.id, "%s %s" % (ad.first_name, ad.last_name)) for ad in IESGLogin.objects.filter(user_level=1).order_by('last_name')] + [('-99', '------------------')] + [(ad.id, "%s %s" % (ad.first_name, ad.last_name)) for ad in IESGLogin.objects.filter(user_level=2).order_by('last_name')]
@@ -275,25 +261,18 @@ def search_query(query_original, sort_by=None):
 
     class SearchForm(forms.Form):
         name = forms.CharField(required=False)
-        addInputEvents(name.widget) # consider moving this to jQuery client-side instead
         rfcs = forms.BooleanField(required=False,initial=True)
         activeDrafts = forms.BooleanField(required=False,initial=True)
         oldDrafts = forms.BooleanField(required=False,initial=False)
         lucky = forms.BooleanField(required=False,initial=False)
 
         by = forms.ChoiceField(choices=[(x,x) for x in ('author','group','area','ad','state')], required=False, initial='wg', label='Foobar')
         author = forms.CharField(required=False)
-        addInputEvents(author.widget)
         group = forms.CharField(required=False)
-        addInputEvents(group.widget)
         area = forms.ModelChoiceField(Group.objects.filter(type="area", state="active").order_by('name'), empty_label="any area", required=False)
-        addInputEvents(area.widget)
         ad = forms.ChoiceField(choices=(), required=False)
-        addInputEvents(ad.widget)
         state = forms.ModelChoiceField(State.objects.filter(type="draft-iesg"), empty_label="any state", required=False)
-        addInputEvents(state.widget)
         subState = forms.ChoiceField(choices=(), required=False)
-        addInputEvents(subState.widget)
 
         def __init__(self, *args, **kwargs):
             super(SearchForm, self).__init__(*args, **kwargs)

ietf/templates/base.html

@@ -102,6 +102,7 @@
 //]]>
 </script>
 <script type="text/javascript" src="/js/base.js"></script>
+{% block js %}{% endblock %}
 
 {% block content_end %}
 {% endblock %} 

ietf/templates/idrfc/main.html

@@ -82,3 +82,7 @@ <h1>Search Internet-Drafts and RFCs</h1>
     var oButton = new YAHOO.widget.Button("search_submit_button", {});
 });      
 {% endblock scripts %}
+
+{% block js %}
+<script type="text/javascript" src="/js/doc-search.js"></script>
+{% endblock %}

ietf/templates/idrfc/search_form.html

@@ -47,25 +47,25 @@
 </table>
 </div>
 
-<span onclick="toggleAdvanced();"><b><img src="/images/{% if meta.advanced %}minus{% else %}plus{% endif %}.png" alt="" id="search_advanced-img" /> Advanced</b></span>
+<span class="toggle_advanced"><b><img src="/images/{% if meta.advanced %}minus{% else %}plus{% endif %}.png" alt="" id="search_advanced-img" /> Advanced</b></span>
 
 <div id="search_advanced" style="{% if not meta.advanced %}display:none;{%endif%}margin-top:1em;">
 Additional search criteria:
 
 <div class="search_field">
-<label><input type="radio" class="radio" name="by" value="author" {% ifequal meta.by "author" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Author (last name):</label> {{ form.author }}
+<label><input type="radio" class="radio" name="by" value="author" {% ifequal meta.by "author" %}checked="checked"{% endifequal %}/> Author (last name):</label> {{ form.author }}
 </div>
 <div class="search_field">
-<label><input type="radio" class="radio" name="by" value="group" {% ifequal meta.by "group" %}checked="checked"{% endifequal %} onclick="changeBy();"/> WG:</label> {{ form.group }}
+<label><input type="radio" class="radio" name="by" value="group" {% ifequal meta.by "group" %}checked="checked"{% endifequal %}/> WG:</label> {{ form.group }}
 </div>
 <div class="search_field">
-<label><input type="radio" class="radio" name="by" value="area" {% ifequal meta.by "area" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Area:</label> {{ form.area }}
+<label><input type="radio" class="radio" name="by" value="area" {% ifequal meta.by "area" %}checked="checked"{% endifequal %}/> Area:</label> {{ form.area }}
 </div>
 <div class="search_field">
-<label><input type="radio" class="radio" name="by" value="ad" {% ifequal meta.by "ad" %}checked="checked"{% endifequal %} onclick="changeBy();"/> Responsible AD:</label> {{ form.ad }} 
+<label><input type="radio" class="radio" name="by" value="ad" {% ifequal meta.by "ad" %}checked="checked"{% endifequal %}/> Responsible AD:</label> {{ form.ad }} 
 </div>
 <div class="search_field">
-<label><input type="radio" class="radio" name="by" value="state" {% ifequal meta.by "state" %}checked="checked"{% endifequal %} onclick="changeBy();"/> IESG State:</label> {{ form.state }} :: {{ form.subState }}
+<label><input type="radio" class="radio" name="by" value="state" {% ifequal meta.by "state" %}checked="checked"{% endifequal %}/> IESG State:</label> {{ form.state }} :: {{ form.subState }}
 </div>
 {% comment %}
 <div class="search_field" style="text-decoration:line-through;color:#808080;">
@@ -83,100 +83,3 @@
 </div>
 
 </form>
-
-<script type="text/javascript">
-//<![CDATA[
-// we want to disable our submit button if we have no search text, 
-// and we have no advanced options selected
-function toggleSubmit() {
-    var button = document.getElementById("id_search_submit");
-    var by = findCheckedSearchBy();
-    var value = findSearchByValue(by);
-    var text = document.getElementById("id_name");
-    if ((value == "") && (text.value == "")) {
-        button.disabled = true;
-    } else {
-        button.disabled = false;
-    }
-}
-
-// check our button status after every change to text fields
-// Internet Explorer uses 'onpropertychange', everyone else 'oninput'
-function inputEvent(event) {
-    toggleSubmit();
-}
-function propertyChange() {
-    toggleSubmit();
-}
-
-// check our button status after every change to selection pulldowns
-function changeEvent(event) {
-    toggleSubmit();
-}
-
-function togglePlusMinus(id) {
-    var el = document.getElementById(id);
-    var imgEl = document.getElementById(id+"-img");
-    if (el.style.display == 'none') { 
-        el.style.display = 'block'; 
-        imgEl.src = "/images/minus.png";
-    } else { 
-        el.style.display = 'none'; 
-        imgEl.src = "/images/plus.png";
-    }
-}
-
-function findCheckedSearchBy() {
-    var by=''; 
-    var f = document.search_form;
-    for (var i = 0; i < f.by.length; i++) {
-        if (f.by[i].checked) { 
-            by = f.by[i].value; 
-            break; 
-        }
-    }
-    return by;
-}
-
-function findSearchByValue(by) {
-    if (by == 'author') { return document.getElementById("id_author").value; }
-    if (by == 'group') { return document.getElementById("id_group").value; }
-    if (by == 'area') { return document.getElementById("id_area").value; }
-    if (by == 'ad') { return document.getElementById("id_ad").value; }
-    if (by == 'state') { 
-        // state might be state...
-        state_value = document.getElementById("id_state").value;
-        if (state_value) { return state_value; }
-        // ...or sub-state
-        return document.getElementById("id_subState").value;
-    }
-    return '';
-}
-
-function changeBy() {
-    var by=findCheckedSearchBy();
-    var f = document.search_form;
-    f.author.disabled=true;  
-    f.group.disabled=true;
-    f.area.disabled=true;
-    f.ad.disabled=true;
-    f.state.disabled=true; f.subState.disabled=true;
-    if (by=='author') { f.author.disabled=false;}
-    if (by=='group') { f.group.disabled=false;}
-    if (by=='area') { f.area.disabled=false;}
-    if (by=='ad') { f.ad.disabled=false; }
-    if (by=='state') { f.state.disabled=false; f.subState.disabled=false; }
- 
-    toggleSubmit();
-}
-
-function toggleAdvanced() {
-    togglePlusMinus("search_advanced");
-    var f = document.search_form; 
-    for (var i = 0; i < f.by.length; i++) { f.by[i].checked = false; }
-    changeBy();
-}
-
-changeBy();
-//]]>
-</script>

ietf/templates/idrfc/search_main.html

@@ -53,3 +53,7 @@ <h1>Internet-Drafts and RFCs</h1>
     var oButton = new YAHOO.widget.Button("search_submit_button", {});
 });      
 {% endblock scripts %}
+
+{% block js %}
+<script type="text/javascript" src="/js/doc-search.js"></script>
+{% endblock %}

static/js/doc-search.js

@@ -0,0 +1,88 @@
+$(function () {
+    var form = jQuery("#search_form");
+
+    form.find(".search_field").click(function () {
+        changeBy();
+    });
+
+    form.find(".search_field").find("input,select")
+        .change(toggleSubmit).click(toggleSubmit).keyup(toggleSubmit);
+
+    form.find(".toggle_advanced").click(function () {
+        togglePlusMinus("search_advanced");
+        form.find('.search_field input[type="radio"]').attr("checked", false);
+        changeBy();
+    });
+
+    changeBy();
+
+    // we want to disable our submit button if we have no search text, 
+    // and we have no advanced options selected
+    function toggleSubmit() {
+        var button = document.getElementById("id_search_submit");
+        var by = findCheckedSearchBy();
+        var value = findSearchByValue(by);
+        var text = document.getElementById("id_name");
+        if ((value == "") && (text.value == "")) {
+            button.disabled = true;
+        } else {
+            button.disabled = false;
+        }
+    }
+
+    function togglePlusMinus(id) {
+        var el = document.getElementById(id);
+        var imgEl = document.getElementById(id+"-img");
+        if (el.style.display == 'none') { 
+            el.style.display = 'block'; 
+            imgEl.src = "/images/minus.png";
+        } else { 
+            el.style.display = 'none'; 
+            imgEl.src = "/images/plus.png";
+        }
+    }
+
+    function findCheckedSearchBy() {
+        var by=''; 
+        var f = document.search_form;
+        for (var i = 0; i < f.by.length; i++) {
+            if (f.by[i].checked) { 
+                by = f.by[i].value; 
+                break; 
+            }
+        }
+        return by;
+    }
+
+    function findSearchByValue(by) {
+        if (by == 'author') { return document.getElementById("id_author").value; }
+        if (by == 'group') { return document.getElementById("id_group").value; }
+        if (by == 'area') { return document.getElementById("id_area").value; }
+        if (by == 'ad') { return document.getElementById("id_ad").value; }
+        if (by == 'state') { 
+            // state might be state...
+            state_value = document.getElementById("id_state").value;
+            if (state_value) { return state_value; }
+            // ...or sub-state
+            return document.getElementById("id_subState").value;
+        }
+        return '';
+    }
+
+    function changeBy() {
+        var by = findCheckedSearchBy();
+        var f = document.search_form;
+        f.author.disabled=true;  
+        f.group.disabled=true;
+        f.area.disabled=true;
+        f.ad.disabled=true;
+        f.state.disabled=true; f.subState.disabled=true;
+        if (by=='author') { f.author.disabled=false;}
+        if (by=='group') { f.group.disabled=false;}
+        if (by=='area') { f.area.disabled=false;}
+        if (by=='ad') { f.ad.disabled=false; }
+        if (by=='state') { f.state.disabled=false; f.subState.disabled=false; }
+
+        toggleSubmit();
+    }
+});