Skip to content

Commit

Permalink
Replaces YUI with jQuery in the AjaxForeignKeyWidget
Browse files Browse the repository at this point in the history
  • Loading branch information
@gkanwar
gkanwar committed May 21, 2012
1 parent cde76b8 commit 9f52d0d
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 92 deletions.
133 changes: 42 additions & 91 deletions esp/esp/db/forms.py
View file
Expand Up @@ -47,119 +47,70 @@ def render(self, *args, **kwargs):
else:
model_module = related_model.__module__
model_name = related_model.__name__

if self.shadow_field:
shadow_field_javascript = """
$j("#id_%s").val(ui.item.value);
""" % (self.shadow_field)
else:
shadow_field_javascript = ""

javascript = """
<script type="text/javascript">
<!--
document.getElementById("id_%s").value = "%s";
var %s_data = new YAHOO.widget.DS_XHR("/admin/ajax_autocomplete/",
['result','ajax_str','id']);
%s_data.scriptQueryParam = "ajax_data";
%s_data.scriptQueryAppend = "model_module=%s&model_name=%s&ajax_func=%s";
%s_data.connTimeout = 3000;
var autocomp__%s = new YAHOO.widget.AutoComplete("id_%s","id_%s__container",%s_data);
autocomp__%s.allowBrowserAutocomplete = false;
//autocomp__%s.typeAhead = true;
autocomp__%s.animVert = true;
autocomp__%s.queryDelay = 0;
autocomp__%s.maxCacheEntries = 60;
autocomp__%s.animSpeed = .5;
autocomp__%s.useShadow = true;
autocomp__%s.useIFrame = true;
YAHOO.util.Event.addListener(window, "load", function (e) {
var elements = YAHOO.util.Dom.getElementsByClassName('form-row', 'div');
for (var i=0; i< elements.length; i++) {
var sub_elements = YAHOO.util.Dom.getElementsByClassName('raw_id_admin',
'div',
elements[i]);
for (var j=0; j< sub_elements.length; j++) {
sub_elements[j].style.display = 'none';
sub_elements[j].style.visibility = 'hidden';
}
elements[i].style.overflow = 'visible';
if (YAHOO.util.Dom.getElementsByClassName('yui_autocomplete','div', elements[i]).length > 0) {
elements[i].style.paddingBottom = '12.5em';
var sub_elements = YAHOO.util.Dom.getElementsByClassName('add-another', 'a', elements[i]);
for (var j=0; j< sub_elements.length; j++) {
sub_elements[j].style.display = 'none';
}
$j("#id_%s").val("%s");
$j("#id_%s").autocomplete({
source: function(request, response) {
$j.ajax({
url: "/admin/ajax_autocomplete/",
dataType: "json",
data: {
model_module: "%s",
model_name: "%s",
ajax_func: "%s",
ajax_data: request.term
},
success: function(data) {
var output = $j.map(data.result, function(item) {
return {
label: item.ajax_str,
value: item.ajax_str,
id: item.id,
};
});
response(output);
}
});
},
select: function(event, ui) {
$j("#id_%s_data").val(ui.item.id);
%s
}
}
});
//-->
</script>""" % \
(fn, addslashes(init_val),
fn, fn, fn, model_module, model_name, self.ajax_func or 'ajax_autocomplete',
fn, fn, fn, fn, fn, fn, fn, fn, fn, fn, fn, fn, fn)

if self.shadow_field:
javascript += """
<script type="text/javascript">
<!--
YAHOO.util.Event.addListener(window, "load", function (e) {
// YAHOO.util.Event.addListener(document.getElementById("id_%s"), "onchange", function (e) {
document.getElementById("id_%s").onchange = function (e) {
document.getElementById("id_%s").value = document.getElementById("id_%s").value;
console.log("Updated to " + document.getElementById("id_%s").value);
};
});
// -->
</script>""" % (fn, fn, self.shadow_field, fn, fn) # (fn, self.shadow_field, fn, fn)

css = """
<style type="text/css">
/* Taken from Yahoo... */
#id_%s__yui_autocomplete {position:relative;width:%sem;margin-bottom:1em;}/* set width of widget here*/
#id_%s__yui_autocomplete {z-index:0} /* for IE z-index of absolute divs inside relative divs issue */
#id_%s__yui_autocomplete input {_position:absolute;width:100%%;height:1.4em;z-index:0;} /* abs for ie quirks */
#id_%s__container {position:relative; width:100%%;top:-.1em;}
#id_%s__container .yui-ac-content {position:absolute;width:100%%;border:1px solid #ccc;background:#fff;overflow:hidden;z-index:9050;}
#id_%s__container .yui-ac-shadow {position:absolute;margin:.3em;width:100%%;background:#eee;z-index:8000;}
#id_%s__container ul {padding:5px 0;width:100%%; list-style-type: none;margin-left: 0; padding-left: 0;z-index:9000;}
#id_%s__container li {padding:0 5px;cursor:default;white-space:nowrap;padding-left: 0; margin-left: 0;}
#id_%s__container li.yui-ac-highlight {background:#9cf;z-index:9000;}
#id_%s__container li.yui-ac-prehighlight {background:#CCFFFF;z-index:9000;}
.yui-ac-bd { padding:0; margin: 0; z-index:9000;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#id_%s__container { position: relative;top:2.3em; }
</style>
<![endif]-->
""" % \
(fn,self.width,fn,fn,fn,fn,fn,fn,fn,fn,fn,fn)
(fn, addslashes(init_val), fn,
model_module, model_name, self.ajax_func or 'ajax_autocomplete',
fn, shadow_field_javascript)

html = """
<div class="container" style="position: relative;">
<div class="yui_autocomplete" id="id_%s__yui_autocomplete">
<input type="text" id="id_%s" name="%s" class="vCharField%s" value="%s" />
<div id="id_%s__container" class="yui_container"></div>
</div>
</div>
<input type="text" id="id_%s" name="%s_raw" value="%s" />
<input type="hidden" id="id_%s_data" name="%s" />
<div class="raw_id_admin">
<a href="../" class="related-lookup" id="lookup_%s" onclick="return showRelatedObjectLookupPopup(this);">
<img src="/media/admin/img/admin/selector-search.gif" border="0" width="16" height="16" alt="Lookup" /></a>
&nbsp;<strong>%s</strong>
</div>
""" % (fn,fn,fn,self.field.blank and ' required' or '',addslashes(data or ''),fn,
fn,old_init_val)
""" % (fn,fn,addslashes(data or ''),fn,fn,fn,old_init_val)

# Add HTML for shadow field if desired
if self.shadow_field:
html += '<input type="hidden" id="id_%s" name="%s" value="%s"/>' % (self.shadow_field, self.shadow_field, old_init_val)

return mark_safe(css + html + javascript)
return mark_safe(html + javascript)

class AjaxForeignKeyWidget(AjaxForeignKeyFieldBase, forms.widgets.Widget):
choices = ()
Expand Down
2 changes: 1 addition & 1 deletion esp/esp/db/views.py
View file
Expand Up @@ -24,7 +24,7 @@ def autocomplete_wrapper(function, data, is_staff):
@login_required
def ajax_autocomplete(request):
"""
This function will recieve a bunch fo GET requests for the
This function will recieve a bunch of GET requests for the
AjaxForeignKey, and return the data for the autocompletion.
"""
try:
Expand Down
6 changes: 6 additions & 0 deletions esp/templates/users/profile.html
View file
Expand Up @@ -7,9 +7,15 @@
{% autoescape off %}{{ "Profile Editor"|subsection }}{% endautoescape %}
{% endblock %}

{% block xtrajs %}
{{ block.super }}
<script type="text/javascript" src="/media/scripts/jquery-ui.js"></script>
{% endblock %}

{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="/media/styles/forms.css" />
<link rel="stylesheet" type="text/css" href="/media/styles/jquery-ui/jquery-ui.css" />
<style type="text/css">

.required { border: 2px solid black; }
Expand Down

0 comments on commit 9f52d0d

Please sign in to comment.