PDA

View Full Version : Combo box question

joble
09-25-2002, 04:09 AM
Hi All,

I have a combo box that is being populated by
Javascript using arrays. The array variables
contains 800+ elements and takes time before
it gets loaded on the combo box.

Is there a better & faster way of populating a combo box which would contains 800+ elements using Javascript ?

Thank you in advance.

Best regards, joble.
glenngv
09-25-2002, 04:33 AM
can you post your code?
joble
09-25-2002, 07:14 AM
Hello,

Basically, the Coldfusion loads the data elements
to the array variables. The array variables contains the data elements that will be populated
on the combo box whenever a user made a certain event action i.e. onclick.

The problem here is the array variables takes time before it can completely load the data on the combo box. Any suggestions ? Thanks for any help.


<SCRIPT LANGUAGE="JavaScript">

SBU_count = 0
<cfset i = 0>
SBUCustArray = new Array();
SBUCustNoArray = new Array();
<cfoutput query="GetSBU_CustNos"group="CustomerName">

<cfoutput>
<cfset i = i + 1>
SBU_count = #i#;
SBUCustNoArray[#i#] = #CustomerNumber#;
SBUCustArray[#i#] = "#CustomerName#";
</cfoutput>
</cfoutput>

function PopulateSBUCust()
{
x = 0;
document.FcstForm.TheCustomer.length = SBU_count;
for (i=1; i<=SBU_count;i++)
{
document.FcstForm.TheCustomer[x].value = SBUCustNoArray[i];
document.FcstForm.TheCustomer[x].text = SBUCustArray[i];
x = x + 1;
}
}
glenngv
09-25-2002, 07:46 AM
your code can be optimized like this:

function PopulateSBUCust()
{
objSelect = document.FcstForm.TheCustomer;
if (objSelect.options.length==SBU_count) return; //already loaded
df = new Date();
for (var i=0; i<SBU_count;i++){
objSelect.options[i] = new Option(SBUCustNoArray[i],SBUCustNoArray[i]);
}
dt = new Date();
alert("Duration: "+(dt-df)/1000 + " sec");
}

remember arrays starts at 0 not 1, so in your cfusion code, you should generate array with index starting at 0.

and you said this function is called on onclick event. I assume you only allow this function to be executed once since you already loaded all the items in the combo. Unless you have other code that deletes items in the combo.

in my case, assuming a pre-loaded array of length 800, it took just around 3.5 secs
joble
09-25-2002, 08:04 AM
Hello,

Thanks for the suggestions. Appreciate it.

Anyhow, the function PopulateSBUCust() is
called multiple times depending if the user
clicks the radio button for SBUCust to select which category of customer. There's another
category and function for PopulateParentCust()
which also populate the same combo box but with
a different data elements.

I'm trying to find other ways to improve the
loading and selection. I have an idea on it but
not sure how to do it. i.e. having 2 combox for both SBUCust & ParentCust but hiding 1 of the combo box and show either one of them depending on the user selection of customer category.

Any suggestions ? Thanks so much for any help.

Best regards, joble.
glenngv
09-25-2002, 08:12 AM
your idea is correct.
your cfusion code should generate the option tags like this:

<select name="s1" style="display:none">
<option value="blah">blah</option>
...
</select>

<select name="s2" style="display:none">
<option value="blah">blah</option>
...
</select>

then onclick of a radio button, you can display/hide selects like this:

document.YourFormName.s1.display=""; //show s1
document.YourFormName.s2.display="none"; //hide s2
joble
09-25-2002, 08:17 AM
Hello,

This is great! Thanks!

One more thing, does the hiding/displaying logic
you mentioned will also work for all versions of
I.E. and Netscape ? especially version 4.x, 5.x,
6.x and higher ?

Thanks so much!

Best regards, joble.
glenngv
09-25-2002, 09:35 AM
all IE, NS6 and up.
not NS4.X
joble
09-25-2002, 09:55 AM
Hello,

I've tried the logic using IE 4.X but it didn't
work. Also, is there a way to make it work using Netscape 4.x ?

Here's the code. Pls let me know if I missed something. Thanks so much!


<html>
<script language="Javascript">

function blah()
{
document.sName.s2.display="";
}

</script>

<form name="sName">

<INPUT TYPE=RADIO NAME=filter VALUE="blah" onclick="blah()" >

<select name="s1">
<option value="blah1">blah 1</option>
<option value="blah2">blah 2</option>
<option value="blah3">blah 3</option>
</select>

<select name="s2" style="display:none">
<option value="blah2">blah2</option>
</select>
</form>


</html>
glenngv
09-26-2002, 03:47 AM
<html>
<head>
<script language="Javascript">

function blah(val)
{
if (val=="1"){
document.sName.s1.style.display="";//show s1
document.sName.s2.style.display="none";//hide s2
}
else{
document.sName.s1.style.display="none";//hide s1
document.sName.s2.style.display="";//show s2
}
}

</script>
</head>
<body>
<form name="sName">

<INPUT TYPE=RADIO NAME=filter VALUE="1" onclick="blah(this.value)">Select 1
<INPUT TYPE=RADIO NAME=filter VALUE="2" onclick="blah(this.value)">Select 2
<br>

<select name="s1" style="display:none">
<option value="blah1">this is select 1</option>
<option value="blah2">blah 2</option>
<option value="blah3">blah 3</option>
</select>

<select name="s2" style="visibility:hide;display:none">
<option value="blah1">this is select 2</option>
<option value="blah2">blah 2</option>
<option value="blah3">blah 3</option>
</select>
</form>
</body>
</html>


not sure if this works with IE4.X, I have no IE4 to test it. But definitely it wont work with NS4.X. Though it is possible to make it work with NS4, i think it's not worth the effort.
joble
09-26-2002, 06:47 AM
Hello,

Thanks a lot ! It's working in IE4+


Best regards, joble.
joble
09-26-2002, 06:57 AM
Hello,

Thanks a lot ! It's working in IE4+


Best regards, joble.