asked on

dynamically populate HTML table using JavaScript

I have a combo box with a list of Project names. Than I have a JavaScript array with details about those projects. The array looks like this:

aUpdates[1] = '1~82~3/15/2003~Initial stage. Project Created';
aUpdates[2] = '2~82~3/21/2003~Project has been reviewed by the Development team';
aUpdates[28] = '3~82~3/24/2003~Moved through this stage';
aUpdates[29] = '4~82~3/24/2003~Moved through this stage';
aUpdates[36] = '5~82~3/24/2003~Moved';
aUpdates[37] = '6~82~3/24/2003~Moved through this stage';
aUpdates[38] = '7~82~3/24/2003~Moved through this stage';
aUpdates[39] = '8~82~3/24/2003~Moved';
aUpdates[40] = '8~82~3/25/2003~this is a test';

This array is pre-loaded from database. Each of the array elements represent a row in a database table. If you split each of the array elements by "~" you'll get my field values. The second value, in this example it's "82", represents ID of the Project in my Combo Box.

I also have HTML table that I want to use to populate with Project information from this array. I need this table to dynamically populate when I select a value from the Combo box. If a selected combo box value does not have any details within the array, I need to hide this table. I can do this with ASP, but that means I need to reload the whole page. Is there any way to do this with JavaScript?

I don't mind changing my array as well if someone can tell me a better way of populating it to fit my purpose.

If possible, I need a piece of funcional code using the above example.

m8rix

What you wan't to do sounds very possible...
Can you post the code for your combo box so I can understand more what you are trying to do?

m8rix

Is there anything between:
aUpdates[2]
and
aUpdates[28]?

rtarna

ASKER

The combo is populated from an xml file with asp and below the code you'll find the xml file. And to answer your second question, no, there's nothing between aUpdates[2] and aUpdates[28]. Those are just RowIDs of the records.

=========================================================
<SELECT id=cboProjects style="FONT-SIZE: 8pt;" name=cboProjects onchange="javascript: GetProjectDetail(document.frmProjectDB, cboProjects.options[cboProjects.selectedIndex].value);">
<option value="0" selected></option>

<%
Set oXML = Server.CreateObject("Microsoft.XMLDOM")
oXML.validateOnParse = True
oXML.load(Server.MapPath("../Files/allProjects.xml"))
Set oRoot = oXML.documentElement
For intLoop = 0 to oRoot.childNodes.length - 1
strTemp = "<option value="
strTemp = strTemp & oRoot.childNodes.item (intLoop).getAttribute("ID")
strTemp = strTemp & ">"
strTemp = strTemp & oRoot.childNodes(intLoop).childNodes (0).text
strTemp = strTemp & "</option>"

Response.Write strTemp
Next

Set oXML = Nothing
%>

</SELECT>

=========================================================

<?xml version='1.0'?>
<PROJECTS>
<PROJECT ID='98'>
<PROJECT_NAME>Report1</PROJECT_NAME>
<REQUESTOR_NAME>Sandy</REQUESTOR_NAME>
<POPULATION>Site</POPULATION>
<IMPACT>Provide a one access point for monitoring.</IMPACT>
<SYSTEMS>Chronicle</SYSTEMS>
<STATUS>OPEN</STATUS>
<ASSIGNED_TO>mst</ASSIGNED_TO>
<PROJ_START>3/10/2003</PROJ_START>
<PROJ_END>3/21/2003</PROJ_END>
<PRIORITYID>1</PRIORITYID>
<PROJECT_CAT>2</PROJECT_CAT>
</PROJECT>
<PROJECT ID='97'>
<PROJECT_NAME>Organizational Charts</PROJECT_NAME>
<REQUESTOR_NAME>Shelly</REQUESTOR_NAME>
<POPULATION>Site</POPULATION>
<IMPACT>These are provided to the dept.</IMPACT>
<SYSTEMS>TCS</SYSTEMS>
<STATUS>OPEN</STATUS>
<ASSIGNED_TO>Rta</ASSIGNED_TO>
<PROJ_START>3/31/2003</PROJ_START>
<PROJ_END>1/1/1900</PROJ_END>
<PRIORITYID>1</PRIORITYID>
<PROJECT_CAT>1</PROJECT_CAT>
</PROJECT>
<PROJECT ID='82'>
<PROJECT_NAME>Support Staff</PROJECT_NAME>
<REQUESTOR_NAME>Shelly</REQUESTOR_NAME>
<POPULATION>Site</POPULATION>
<IMPACT>TSC</IMPACT>
<SYSTEMS>Staffing</SYSTEMS>
<STATUS>OPEN</STATUS>
<ASSIGNED_TO>rok</ASSIGNED_TO>
<PROJ_START>3/3/2003</PROJ_START>
<PROJ_END>3/13/2003</PROJ_END>
<PRIORITYID>1</PRIORITYID>
<PROJECT_CAT>1</PROJECT_CAT>
</PROJECT>
</PROJECTS>

ASKER CERTIFIED SOLUTION

m8rix

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

m8rix

Oops..

You can delete line 20:
projecttable.innerHTML = "<table>";

While your at it replace the array with this:

aUpdates = new Array();
aUpdates[1] = '1~82~3/15/2003~Initial stage. Project Created';
aUpdates[2] = '2~82~3/21/2003~Project has been reviewed by the Development team';
aUpdates[3] = '3~82~3/24/2003~Moved through this stage';
aUpdates[4] = '4~82~3/24/2003~Moved through this stage';
aUpdates[5] = '5~82~3/24/2003~Moved';
aUpdates[6] = '6~82~3/24/2003~Moved through this stage';
aUpdates[7] = '7~22~3/24/2003~Moved through this stage';
aUpdates[8] = '8~82~3/24/2003~Moved';
aUpdates[9] = '8~82~3/25/2003~this is a test';
aUpdates[10] = '8~22~3/25/2003~this is a test';
aUpdates[11] = '1~67~3/15/2003~Initial stage. Project Created';
aUpdates[12] = '2~22~3/21/2003~Project has been reviewed by the Development team';
aUpdates[13] = '3~81~3/24/2003~Moved through this stage';
aUpdates[14] = '4~81~3/24/2003~Moved through this stage';
aUpdates[15] = '5~81~3/24/2003~Moved';
aUpdates[16] = '6~81~3/24/2003~Moved through this stage';
aUpdates[17] = '7~81~3/24/2003~Moved through this stage';
aUpdates[18] = '8~81~3/24/2003~Moved';
aUpdates[19] = '8~67~3/25/2003~this is a test';

(this will give you a better understanding of what I have done) :-) good luck

Regards

rtarna

ASKER

Thank you. That's exactly what I needed.
I do need to use the RowIDs because they are used as links from my dynamic table.
I just had to modify the code a little to do some other things as well.

rtarna

ASKER

That's exaclty what I needed. Thanks.

m8rix

No worries...

Happy programing :o)