Sean
Posts: 39
|
| Posted: 03/16/2005, 12:03 PM |
|
Like many of you, I have been in search of a better way to do dependent listboxes WITHOUT the nasty refresh. I always knew it could be done with Javascript, but I did not really understand Javascript enough to accomplish what I was trying to do: load all my data into an array at run time. I found a nice, easy to understand article on 4guys that accomplishes just this.
http://www.4guysfromrolla.com/webtech/101099-1.shtml
I have taken what they wrote and got it "working" with CodeCharge Studio. I wanted to share it with everyone to hopefully expand upon this idea for everyone else (I know there are many of you out there that can code much better than I can). So please, someone build upon this idea and make it even better for the rest of us.
Keep in mind this is on my Intranet, so pre-loading all my data is not an issue. This may not be the best solution for you if you are using this for an Internet-based application due to bandwidth and processing power (especially if you have a lot of possible options).
Anyway, on with the code......
Database Structure
---------------------------------------------------------------
Table: Makes: ID (autonumber), Make (50 char)
Table: Models: ID (autonumber), MakeID (number), Model (50 char)
Create a new record form with the following attributes:
---------------------------------------------------------------
Form Name = subad
1st Dropdown Name = catagory
2nd Dropdown Name = subcatagory
Set catagory Dropdown Datasource to Makes with bound column of ID and text column of Make.
Set subcatagory Dropdown Datasource to Models with bound column of ID and text column of Model.
HTML Modification
---------------------------------------------------------------
In CCS, go into the HTML source view (HTML tab) and add 3 labels directly underneath <head> as HTML content (Data tab in CCS properties window).
Select the catagory Dropdown. Click the Format tab in CCS properties window. Expand the Events tree. Add the following to the onChange event:
sublist(this.form, document.subad.catagory[document.subad.catagory.selectedIndex].value)
Before Show Events
---------------------------------------------------------------
While still in HTML source view, click each Label and add the following Events in Before Show (Events tab in CCS properties window).
Label1
---------
Dim x, sqlstring, rs
sqlstring = "select * from Models"
set rs = DBTDI.execute(sqlstring)
x=0
Label1.value = "<script language = ""JavaScript"">" & vbCrLf _
& " function sublist(inform, selecteditem)" & vbCrLf _
& " {" & vbCrLf _
& " inform.subcatagory.length = 0 "
Label2
---------
Dim count, y, rs, sqlstring
sqlstring = "select * from Models"
set rs = DBTDI.execute(sqlstring)
count= 0
y=0
do while not rs.eof
Label2.value = Label2.value & vbCrLf _
& " x = " & trim(y) & vbCrLf _
& " subcat = new Array();" & vbCrLf _
& " subcatagorys = " & """" & trim(rs("Model")) & """" & vbCrLf _
& " subcatagoryof = " & """" & trim(rs("MakeID")) & """" & vbCrLf _
& " subcatagoryid = " & """" & trim(rs("ID")) & """" & vbCrLf _
& " subcat[x,0] = subcatagorys;" & vbCrLf _
& " subcat[x,1] = subcatagoryof;" & vbCrLf _
& " subcat[x,2] = subcatagoryid;" & vbCrLf _
& vbCrLf _
& " if (subcat[x,1] == selecteditem){" & vbCrLf _
& " var option" & trim(count) & " = new Option(subcat[x,0], subcat[x,2])" & vbCrLf _
& " inform.subcatagory.options[inform.subcatagory.length]=option" & trim(count) & vbCrLf _
& " }" & vbCrLf _
& ""
count = count + 1
y = y + 1
rs.movenext
loop
Label3
---------
Label3.value = " }" & vbCrLf _
& "</script>" & vbCrLf _
HTML Snippet
--------------------
<html>
<head>
{Label1}{Label2}{Label3}
<title>Dynamic Listbox</title>
<link rel="stylesheet" type="text/css" href="Themes/Clear/Style.css">
</head>
<body>
<p align="center">
<!-- BEGIN Record subad --></p>
<div align="center">
<form name="{HTMLFormName}" action="{Action}" method="post">
<table class="ClearFormTABLE" cellspacing="1" cellpadding="3" border="0" width="800">
<!-- BEGIN Error -->
<tr>
<td class="ClearErrorDataTD" colspan="2">{Error}</td>
</tr>
<!-- END Error -->
<tr>
<td class="ClearFieldCaptionTD">Make </td>
<td class="ClearDataTD">
<select name="catagory" class="ClearSelect" onchange="sublist(this.form, document.subad.catagory[document.subad.catagory.selectedIndex].value)" style="WIDTH: 323px">
<option value="" selected>[Make]</option>
{catagory_Options}
</select>
</td>
</tr>
<tr>
<td class="ClearFieldCaptionTD">Model </td>
<td class="ClearDataTD">
<select name="subcatagory" class="ClearSelect" style="WIDTH: 323px">
<option value="" selected>[Model]</option>
{subcatagory_Options}
</select>
</td>
</tr>
<tr>
... omitted to save space ...
</tr>
</table>
</form>
</div>
<p align="center"><!-- END Record subad --></p>
</body>
</html>
Once you have this done, run the page. Hopefully everything will work. If it does, check the view source of the html page from your browser. You will see underneath the <head> tag the Javascript array. I think it's pretty nice.
Any feedback would be appreciated. Good Luck.
Happy coding
Sean
|
 |
 |
marcwolf
Posts: 361
|
| Posted: 03/16/2005, 3:42 PM |
|
Thats may work - though one of the problems I can see here is that you still will need to have all of the data for the list boxes in the form as it is sent to the client.
The CCS example pack has an example where you use a pop-up to provide a very quick round trip to the server.
We have independantly developed this concept and use it extenstively to excellent results.
Ok - how does this work.
When the user selects an item from the first listbox we use Javascript to act on the OnChange and call a Javascript routine passing the control name and the control value.
The Javascript then opens a popup or an IFrame (We use the Iframe - much faster) and calls a page with the value. This page is a very tiny ASP page that basically creates a recordset from the passed informaiton and then using the "Window.Parent.xxx" propety updates the contents of the Second list box.
How fast is this.. VERY!!!..
1. The original page is ligher because we do not have lots of information in arrays - less bandwidth
2. Using an IFrame - there is no second instance of the browser to create.
3. The ASP page is tiny. No need for the full CCS features as we are just creating a Javascript only page. Most pages are less that 1k in size
4. Resultant created page containing calls to the parent page like
Clear Second Combo
Add Item 1
Add Item 2
Add Item 3
Tell Parent to Hide IFrame/ClosePopup
likewise - very tiny - not more thans 1k of data to send
We based out designs on this article
http://www.atgconsulting.com/gofetch.asp
However we have progressed on much further. The above technique can also be used to populate all sorts of information on a page i.e.
Textbox Client Abbrev can have a OnChange trigger that then populates address details, charge rates, triggers recalc of totals - all without a refresh of the page.
As we say in our company Making a Rich Client.. Thin!!!!
Take Care
Dave
_________________
' Coding Coding Coding
Keep Those Keyboards Coding.
Raw Code!!!!!!!
|
|
|
|
Sean
Posts: 39
|
| Posted: 03/16/2005, 5:35 PM |
|
Dave, thanks for the reply. Do you have an example of your techniques with the IFRAME? I liked the idea of the gofetch method, but did not like the popup. I would really like to see the IFRAME method.
Thanks,
Sean
|
|
|
|
Benjamin Krajmalnik
|
| Posted: 03/21/2005, 4:56 PM |
|
Dave,
How are you coding thin in an IFRAME?
I am using the methodology exyensively - and as in your case have extended
to perform many tasks.
The IFRAME is a neat idea (I find the popup a bit annoying, although it
takes less than a second).
Regards,
Benjamin
|
|
|
|
Vasiliy
|
| Posted: 04/12/2005, 9:05 AM |
|
You may also look this tutorial:
http://www.denisova.com/SC_Video/CCS_DependentList.html
It shows how to refresh dependant list box by reading data from the server w/o main page refresh.
Regards,
Vasiliy
|
|
|
|
smalloy
Posts: 107
|
| Posted: 04/12/2005, 1:08 PM |
|
Hey Vasiliy, great job thanks a lot for the tutorial.
Unfortunately, my boss finds the popup unprofessional and Ive been searching everywhere for a better way that keeps the client thin without a lot of overhead via the arrays. Id be VERY interested to see the code for the IFRAME. My hope would be that the pointer indicates BUSY for a sec (or less) and poof, dependant listbox is populated.
Dave, if you have a fee moment could you post the IFRAME code?
Thanks a lot!
Steve
_________________
Anything can be done, just give me time and money. |
|
|
|
Vasiliy
|
| Posted: 04/16/2005, 7:25 AM |
|
I have both versions.
Originally I made refresh on IFRAME, but had problems with Opera browser.
Quote smalloy:
Hey Vasiliy, great job thanks a lot for the tutorial.
Unfortunately, my boss finds the popup unprofessional ...
Thanks a lot!
Steve
|
|
|
|
peterr
Posts: 5971
|
| Posted: 04/16/2005, 2:24 PM |
|
Possibly you could try using regular frames, with one frame being hidden.
Not everyone likes to use frames, but this could work better and it should be compatible with all browsers (?).
I haven't use this method, but would start with these tips:
http://www.irt.org/script/1676.htm
http://www.irt.org/script/1707.htm
https://lists.latech.edu/pipermail/javascript/2002-August/003974.html
_________________
Peter R.
YesSoftware Forums Moderator
For product support please visit http://support.yessoftware.com |
|
|
|
Vasiliy
|
| Posted: 04/16/2005, 6:16 PM |
|
Quote peterr:
Possibly you could try using regular frames, with one frame being hidden.
Thanks, I'll try because most of my cusomers use popup blockers and I have to instruct them to disable popup blocker for my domain.
Regards,
Vasiliy.
|
|
|
|
Buzz Napster
|
| Posted: 05/05/2005, 9:29 PM |
|
People, u are my help :D
I've got the point but a little bit 'cause i'm new in asp ... 1 week if it comes tu numbers ... but in stead i'm doing webdesign in php. Can someone help me a little bit with some tutorials or better a downloadable php that does some kind'of self link with "no refresh" - i meen no load bar activity .... may be as well an example with frames ... Please .....
Thanks for the help
Rossy for my pour english .. 17 teen romanian here :D trying to make his steps in the real world :D
Best regards
|
|
|
|
gesto
Posts: 42
|
| Posted: 05/13/2005, 6:03 AM |
|
why dont u use iframes for dependent listbox.... u could use javascprit to refresh the iframes so that u could select the optins that u need..it worked fine with me
|
|
|
|
|
