Michael,
I'm attempting to use your AutoComplete control but I'm getting a
javascript error. There appears to be a problem which results from my
hiding the DIV which contains the GroupNameAutoComplete control. Do you
have any thoughts on how to remedy this problem?
C#
AjaxPro.AjaxAutoComplete GroupNameAutoComplete = new
AjaxPro.AjaxAutoComplete();
GroupNameAutoComplete.ID = "GroupNameAutoComplete";
GroupNameAutoComplete.OnAutoComplete = new
AjaxPro.AjaxAutoComplete.AutoCompleteHandler(this.GetGroups);
g.Controls.Add(GroupNameAutoComplete);
[AjaxPro.AjaxMethod]
public object[] GetGroups(string value, int count)
{
string[] s = new string[(value.Length < count ? value.Length :
count)];
for (int i = 0; i < s.Length; i++)
{
s[i] = value.Substring(0, i + 1);
}
return s;
}
The error I get is "Line: 104, Char: 3, Error: Invalid argument"
The JS which is generated by your control is:
var getLocation = function(ele) {
var offsetX = 0;
var offsetY = 0;
var parent;
for(parent=ele; parent; parent=parent.offsetParent) {
if(parent.offsetLeft)
offsetX += parent.offsetLeft;
if(parent.offsetTop)
offsetY += parent.offsetTop;
}
return {x:offsetX,y:offsetY};
}
var getBounds = function(ele) {
var offset = getLocation(ele);
var width = ele.offsetWidth;
var height = ele.offsetHeight;
return {x:offset.x, y:offset.y, width:width, height:height};
}
function addEvent(o, evType, f, capture) {
if(o.addEventListener) {
o.addEventListener(evType, f, capture);
return true;
} else if (o.attachEvent) {
var r = o.attachEvent("on" + evType, f);
return r;
} else {
// alert("Handler could not be attached");
}
}
function With(o, p) {
for(var prop in p) {
o[prop] = p[prop];
}
}
addNamespace("AjaxPro.Web.Controls");
AjaxPro.Web.Controls.AutoComplete = Class.create();
AjaxPro.Web.Controls.AutoComplete.prototype = {
render: function(p, item) {
if(item == null) {
p.style.display = "none";
return;
}
p.style.display = "block";
if(typeof p.innerText != "undefined")
p.innerText = item;
else
p.textContent = item;
},
callback: function(res) {
if(res.error != null) {
alert(res.error.Message);
return;
}
this.data = res.value;
if(res.value.length == 0) {
this.list.style.visibility = "hidden";
return;
}
this.list.style.visibility = "visible";
var i=0;
for(; i<this.rows.length && i<res.value.length; i++) {
this.render(this.rows[i], res.value[i]);
}
if(this.cursorPos > i -1)
this.setCursor(i -1);
for(; i<this.rows.length; i++) {
this.render(this.rows[i], null);
}
},
fetchData: function() {
var o = AjaxPro.getInstance(this.className);
o[this.method](this.control.value, this.count,
this.callback.bind(this));
},
setCursor: function(pos) {
if(this.cursorPos >= 0 && this.cursorPos < this.rows.length)
this.rows[this.cursorPos].style.backgroundColor = "";
this.cursorPos = pos;
if(this.cursorPos >= 0 && this.cursorPos < this.rows.length)
this.rows[this.cursorPos].style.backgroundColor =
"blue";
},
blur: function() {
this.list.style.visibility = "hidden";
},
onselected: function(value) {
this.control.value = value;
this.blur();
window.event.cancelBubble = true;
},
keyup: function(event) {
if(event.keyCode == 40 || event.keyCode == 38 || event.keyCode
== 13)
return;
switch(event.keyCode) {
case 27:
this.list.style.visibility = "hidden";
break;
default:
window.status = event.keyCode;
if(event.keyCode >= 32)
this.fetchData();
}
},
keydown: function(event) {
switch(event.keyCode) {
case 40:
if(this.cursorPos < this.count -1 &&
this.cursorPos <
this.data.length -1)
this.setCursor(this.cursorPos +1);
break;
case 38:
if(this.cursorPos > 0)
this.setCursor(this.cursorPos -1);
break;
case 13:
if(typeof this.onselected != "function")
return;
if(this.cursorPos == -1)
this.onselected(this.control.value);
else
this.onselected(this.data[this.cursorPos]);
return false;
break;
}
},
load: function() {
addEvent(this.control, "keyup", this.keyup.bind(this));
addEvent(this.control, "keydown", this.keydown.bind(this));
addEvent(this.control, "blur", this.blur.bind(this));
this.control.setAttribute("autocomplete", "off");
var list = document.createElement("div");
document.body.appendChild(list);
this.list = list;
var b = getBounds(this.control);
With(list.style, {
position:"absolute",
width:(b.width -2) + "px",
left:b.x + "px",
top:(b.y + b.height -1) + "px",
border:"1px solid black",
unselectable:"unselectable",
backgroundColor:"white",
visibility:"hidden"
});
this.rows = [];
for(var i=0; i<this.count; i++) {
var d = document.createElement("div");
list.appendChild(d);
this.rows.push(d);
}
},
initialize: function(control, count, className, method) {
this.control = control;
this.count = count;
this.className = className;
this.method = method;
this.cursorPos = -1;
addEvent(window, "load", this.load.bind(this));
}
};
<script type="text/javascript">var x = new
AjaxPro.Web.Controls.AutoComplete(document.getElementById('_ctl0_ContentPlaceHolder2_GroupNameAutoComplete'),
10, 'Citizen_Contacts_ManageContact', 'GetGroups');</script>
And finally the HTML:
<div id="AddContact" class="HideElement"><input
name="_ctl0:ContentPlaceHolder2:GroupNameAutoComplete" type="text"
id="_ctl0_ContentPlaceHolder2_GroupNameAutoComplete" /></div>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ajax.NET Professional" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at http://groups.google.com/group/ajaxpro
The latest downloads of Ajax.NET Professional can be found at
http://www.ajaxpro.info/
Don't forget to read my blog at http://weblogs.asp.net/mschwarz/
The open source project is now located at
http://www.codeplex.com/Wiki/View.aspx?ProjectName=AjaxPro
-~----------~----~----~----~------~----~------~--~---
