ADVERTISEMENT


Hi,

I have 2 listboxes. The first gets populated from the db as soon as the page
loads. The second listbox get populated based on the user's selection from the
first listbox. However, currently the code is such that with each selection
there is a postback. We want to avoid it using filter and javascript. I am not
using ADO.NET but adodbc and no datagrids or datasets (please don't tell me that
i should as my boss clearly doesn't want to get into it at this stage).

How can i do it?

Thanks

<wisecrack>
If you want to build a page that doesn't postback, or use datagrids, datasets or ADO.Net, why use ASP.Net at all? ;)
</wisecrack>

You'll have to have the code "write" javascript. In that javascript you could create a multi-dimensional array (basically a lookup table). The array would have one "row" for every possible entry for the second listbox, and contain the value and text for each as well as the "parent" value that matches the values of the items in the first listbox. When you click on a different item in the first list box, a javascript routine is called that goes thru all the "rows" in the array, finds those who's "parent" value match the selected item's value in the first list box. For each match, add the item to the second listbox.

Do you need help with the exact syntax?

Peter
------------------------------------------------------
Work smarter, not harder.

Hi,

Thanks Peter for the reply.

Personally, I don't see why not to use postback. I don't think that it is irritating to the user and it looks fine and besides the code works great like that so why change it and make my life difficult??:) But i am not in a position yet to state my opinion with my boss.

I would very much appreciate help with the syntax. I don't have much programming experience and i am not sure how to proceed with what you wrote.

Tell me what is better to use: arrays or xml- though i heard that xml might not work with all browsers and arrays sound simpler for someone without that much experience?

You should use javascript arrays. this is much more likely to work with other browsers. Plus it would be more efficient because you wouldn't have to have the thing parsing XML every time you clicked on the list box.

Basically, what you need to do is this...

You have 2 data structures (datareader, datatable in a dataset, etc)
Using the StringBuilder class, you construct the javascript that declares and populates an array.

sJSLookupTable = New System.Text.StringBuilder
sJSLookupTable.AppendFormat("var m_aryLookupData = new Array(-1);{0}", Environment.Newline)
for each record in the first set
    for each record in the second set
        sJSLookupTable.AppendFormat("m_aryLookupData(m_ary LookupData.length) = ['{1}', '{2}'];{0}", Environment.Newline, firstRecordField.Value, secondRecordField.Value)
    next record from second set
next record from first set

For this sample data (to show how the relationships result in the JS lookup data):

You end up with this javascript:

var m_aryLookupData = new Array(-1);
m_aryLookupData(m_aryLookupData.length) = ['Joe', 'Red'];
m_aryLookupData(m_aryLookupData.length) = ['Joe', 'Green'];
m_aryLookupData(m_aryLookupData.length) = ['Fred', 'Blue'];
m_aryLookupData(m_aryLookupData.length) = ['Fred', 'Purple'];


Now, you will need to create a JS function that fills the second dropdownlist based on the selected value of the first. You'll need to clear out the list first, then populate it with options based on what matches from the lookup array.

If you want to have the option's text be something more than what's in the lookup array (which you are using for the option's value), you could add one more element to the line that fills the array so to provide the "text" of the option.

Peter
------------------------------------------------------
Work smarter, not harder.