Hey,
So I wrote this custom tag that basically is a select list that allows you
type in it and filters the options according to what you've typed in.
Some of the data sets in the faux dropdown list are rather large. I am
populating a table in a floating div and then turning it visible below the
input field where the user is typing.
The problem with the large data sets (say over 100 options) is that it takes
forever to render the table. So long in fact that FF asks if I want to stop
the script. Here is how I populate the list:
function setPasField(){
var mac_id = DWRUtil.getValue("mac_id");
var macField = $("mac_id");
DWRUtil.useLoadingMessage();
if(mac_id.length == 2){
DWREngine._execute(_ajaxConfig._cfscriptLocation, null,
"getPasCodes",mac_id, updatePasList);
}
}
function updatePasList(r){
DWRUtil.setValue("debug",r.dump());
DWRUtil.useLoadingImage();
alert("passBack");
}
function handleKey(myEvent,myField){
/*
* the function handleKey() moves the highlighted area up and down
in the values div, as well as filtering the values div
*/
DWRUtil.useLoadingImage();
var myArray = new Array(1); // this array will contain the filtered
values
var myData = myField.value.toUpperCase(); // this variable contains
the current value of the form field
var newCounter = 0; // this counter is used to incriment the
filtered value array (myArray)
var loc = -1; // this variable is used to discover which value is
currently highlighted
var fieldName = myField.name;
var arrayName = myField.name + 'Array';
var contentArray = eval(arrayName);
var myDiv = $('tipDiv' + fieldName);
myDiv.style.visibility = "visible";
var myDataLength = myData.length
// loop through the existing array of values, and filter out the
ones that fit with the user entered data
for(i = 0; i < contentArray.length; i++){
if(contentArray[i].substr( 0,myDataLength) == myData){
myArray[newCounter] = contentArray[i];
newCounter++
}
}
if(myArray.length > 0){
var cellFuncs = [
function(data) { return '<div id="boxOption"
onmouseover="this.style.backgroundColor = \'blue\'; this.style.color =
\'white\'" onmouseout="this.style.backgroundColor = \'white\';
this.style.color = \'black\'" onClick="handleClick(event, this, \'' +
fieldName + '\');">' + data + '</div>';}
];
DWRUtil.setValue('tipDiv' + fieldName,'<table id="tips"
border="1"></table>');
DWRUtil.addRows("tips",myArray,cellFuncs);
var myTable = $("tips");
// now handle the key stroke
/*for(i = 0; i < myTable.childNodes.length; i++){
if(myTable.childNodes[i].childNodes[0].bgColor ==
"blue"){
myTable.childNodes[i].childNodes[0].bgColor
== "white";
loc = i;
}
}
if(loc == -1){
myTable.childNodes[0].childNodes[0].bgColor ==
"blue";
}
*/
}
}
Couple of problems.
1. The time it takes making the option Div visable. It takes freaking
forever, optimization people, any ideas?
2. It's not working at all in IE. I mean, nothing, and this is unusual, as
I've used the AjaxCFC suff in IE with no problems before.
3. For some reason I keep getting an error that the response variable
doesn't exist.
Any help would be greatly appreciated.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Create robust enterprise, web RIAs.
Upgrade & integrate Adobe Coldfusion MX7 with Flex 2
http://ad.doubleclick.net/clk;56760587;14748456;a?http://www.adobe.com/products/coldfusion/flex2/?sdid=LVNU
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:264188
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
