Hi,
I''ve implemented a customized autocompleter using prototypes and it
actually works like a charm in Firefox, but in IE 6/7 it just doesn''t
work because that infernal thing says that ''Autocomp'' (the
class i
created for the autocompleter) is ''not defined''.
It''s kind of weird because I tried to show an alert before of the
class definition but it is not shown even though the error is thrown
at the instantiation of the autocompleter.
I was googling for more than a reasonable time but i did not found the
cause... any help? Please consider that I''m using Portotype framework
(I also tried its Class creation API but the result was the same) and
Scriptaculous (its Ajax.Autocompleter worked without problems, but we
need a more customized control in order to fit our needs).
Sample response file (autocomplete.html):
<table>
<tr><th>Field 1</th><th>Field
2</th><th>Field 3</th></
tr>
<tr
class="autocompleteFila"><td>XXXX</td><td><span
class="autocompleteInput">YYYY</span><span
class="autocompleteRet">ZZZZZ</span></td><td>AAAA</td></tr>
<tr
class="autocompleteFila"><td>XXXX</td><td><span
class="autocompleteInput">YYYY</span><span
class="autocompleteRet">ZZZZZ</span></td><td>AAAA</td></tr>
<tr
class="autocompleteFila"><td>XXXX</td><td><span
class="autocompleteInput">YYYY</span><span
class="autocompleteRet">ZZZZZ</span></td><td>AAAA</td></tr>
<tr
class="autocompleteFila"><td>XXXX</td><td><span
class="autocompleteInput">YYYY</span><span
class="autocompleteRet">ZZZZZ</span></td><td>AAAA</td></tr>
</table>
Sample form is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript"
src="/lib/prototype/prototype.js"></
script>
</head>
<body>
<script type="text/javascript">
/*<[CDATA[*/
alert(''HOLA'');
var Autocomp = function(inputField, returnField, class, rowClass,
returnClass, returnToInputClass, url, reqParam) {
this.idField = inputField;
this.returnField = returnField;
this.cssClass = class;
this.url = url;
this.cssRowClass = rowClass;
this.cssReturnClass = returnClass;
this.cssToInputClass = returnToInputClass;
this.reqParam = reqParam;
this.configure();
}
Autocomp.prototype.load = function(query) {
var complete = function(transport) {
var numRes = 0;
var f = $(this.returnField);
var input = $(this.idField);
var div = this.div;
var claseRet = this.cssReturnClass;
var claseInputRet = this.cssToInputClass;
this.div.innerHTML = transport.responseText;
this.div.select(''.''+this.cssRowClass).each(
function (elem) {
numRes++;
Event.observe(elem, ''click'',
function
(e) {
f.value
elem.select(''.''+claseRet).reduce().innerHTML;
input.value
elem.select(''.''+claseInputRet).reduce().innerHTML;
div.hide();
});
});
if(numRes == 0) {
this.div.hide();
}
else {
this.div.show();
}
}
var h = $H(this.reqParam);
new Ajax.Request(this.url + ''?''+ h.toQueryString() +
''&query=''
+
escape(query),
{
method: ''get'',
onComplete: complete.bind(this)
});
}
Autocomp.prototype.configure = function() {
var f = $(this.idField);
var onKeyPress = function (event) {
if(f.value.length >= 3) {
this.load(f.value)
}
else {
this.div.hide();
}
};
var onFocus = function (event) {
f.clear();
};
Event.observe(f, ''keyup'',
onKeyPress.bindAsEventListener(this));
Event.observe(f, ''focus'',
onFocus.bindAsEventListener(this));
this.div = new Element(''div'',
{''class'': this.cssClass,
''style'': ''z-index: 1000; position: absolute; display:
none; top: 0px;
left:0px''});
f.insert({after: this.div});
this.div.clonePosition(f, {setWidth: false, setHeight: false,
offsetTop: f.getHeight()});
}
alert(''HOLA'');
/*]]>*/
</script>
<input maxlength="100" type="text"
id="txtOrigenOfe"
name="txtOrigenOfe" style="width:180px"
value="">
<script type="text/javascript">
/*<[CDATA[*/
var a = new Autocomp(''txtOrigenOfe'',
''txtOrigenOfe'', ''autocomplete'',
''autocompleteFila'', ''autocompleteRet'',
''autocompleteInput'', ''/
autocomplete.html'', {foo: ''bar''});
/*]]>*/
</script>
</body>
</html>
Thanks in advance.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---