Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Linking data from two XML files

Status
Not open for further replies.
NegreteO

NegreteO

Programmer
Apr 23, 2003
54
US
Hi,

I have two XML files and I am trying to display one xml file content into a html table and I'd like to click on one of its cells and according to the selected cell show a record from another xml file.

Something like this but with two XML files
<html>

<head>
<script type="text/javascript">
function testclick(field)
{
var row=field.rowIndex;
xmldso_list.recordset.absoluteposition=row;
td_title.innerHTML=xmldso_list.recordset("TITLE");
td_artist.innerHTML=xmldso_list.recordset("ARTIST");
td_year.innerHTML=xmldso_list.recordset("YEAR");
td_country.innerHTML=xmldso_list.recordset("COUNTRY");
td_company.innerHTML=xmldso_list.recordset("COMPANY");
td_price.innerHTML=xmldso_list.recordset("PRICE");
}
</script>
</head>

<body>
<xml id="xmldso_list" src="cd_catalog.xml"></xml>

<table border="1" bgcolor="yellow">
<tr align="left"><th>Title: </th><td id="td_title"></td></tr>
<tr align="left"><th>Artist: </th><td id="td_artist"></td></tr>
<tr align="left"><th>Year: </th><td id="td_year"></td></tr>
<tr align="left"><th>Country:</th><td id="td_country"></td></tr>
<tr align="left"><th>Company:</th><td id="td_company"></td></tr>
<tr align="left"><th>Price: </th><td id="td_price"></td></tr>
</table>

<p><b>Click on one of the CDs in the list:</b></p>

<table datasrc="#xmldso_list" border="1">
<thead>
<tr align="left">
<th>Title</th>
<th>Artist</th>
<th>Country</th>
<th>Company</th>
<th>Price</th>
<th>Year</th>
</tr>
</thead>
<tr align="left" onclick="testclick(this)">
<td><div datafld="TITLE" /></td>
<td><div datafld="ARTIST" /></td>
<td><div datafld="COUNTRY" /></td>
<td><div datafld="COMPANY" /></td>
<td align="right"><div datafld="PRICE" /></td>
<td><div datafld="YEAR" /></td>
</tr>
</table>

</body>
</html>


Hope you can help me
Thanks in advance
Oscar
 
Sort by date Sort by votes
Basically, you'd have one XML file like this:
Code: 
<CDS>
<CD>
<CDNO>1</CDNO>
<TITLE>Title of the CD</TITLE>
<ARTIST>Name of the Artist</ARTIST>
<YEAR>1999</YEAR>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>19.99</PRICE>
<OTHERINFO>Whatever you want</OTHERINFO>
</CD>

(Repeat CD for each CD)
</CDS>

Populating the table is a simple XSLT transform.

I'm not sure if your javascript "var row=field.rowIndex;" will actually give you the row clicked. You might need buttons or another input device there.

At any rate, once you've got the row# (or CDNO), it's another XSLT transform to see the OTHERINFO (or whatever you want to call it).

 
Upvote 0 Downvote
Actually what I have is two xml files and one is loaded into a html table, I'd like to click on a cell and then display data related from another xml file.

MES_CheckList.xml

<MESCheckList>
<ACTIVITY>
<AREA>Functional Areas</AREA>
<STEP1>Activities First Level</STEP1>
<STEP2>Activities Second Level</STEP2>
<STEP3>Activities Third Level</STEP3>
<STEP4>Activities Fourth Level</STEP4>
<STEP5>Activities Fifth Level</STEP5>
</ACTIVITY>
<ACTIVITY>
<AREA>Planning</AREA>
<STEP1>1. Upload SAP BOM into MES and validate it</STEP1>
<STEP2>1. Create Assemblies</STEP2>
<STEP3>1. Assign Panel Type to Assembly.&#xD;&#xA;2. Assign Barcode Mask to Assembly</STEP3>
<STEP4>1. Assign Assemblies to Routes</STEP4>
<STEP5>1. Create Assembly Progression</STEP5>
</ACTIVITY>
<ACTIVITY>
<AREA>Quality</AREA>
<STEP1>1. Create Barcode Mask.&#xD;&#xA;2. Create Shifts.&#xD;&#xA;3. Configure OBA sample for Customer/Division</STEP1>
<STEP2>N/A</STEP2>
<STEP3>1. Create properties of assembly in MES and AMW.&#xD;&#xA;2. Create Route Step Setup Sheets</STEP3>
<STEP4>1. Setup Process Verification and Check Points</STEP4>
<STEP5>N/A</STEP5>
</ACTIVITY>
<ACTIVITY>
<AREA>Manufacturing Engineering</AREA>
<STEP1>1. Configure Panel Type.</STEP1>
<STEP2>1. Create Machines, Models, Manufacturer and Stations.</STEP2>
<STEP3>1. Create absent Route and Steps that are required.</STEP3>
<STEP4>1. Create and Validate Setup Sheets (Programming).</STEP4>
<STEP5>N/A</STEP5>
</ACTIVITY>
<ACTIVITY>
<AREA>Test Engineering</AREA>
<STEP1>N/A </STEP1>
<STEP2>N/A </STEP2>
<STEP3>N/A </STEP3>
<STEP4>1. Generate MES Parser files from Test Machines</STEP4>
<STEP5>N/A</STEP5>
</ACTIVITY>
<ACTIVITY>
<AREA>IT</AREA>
<STEP1>1. Create path for test files</STEP1>
<STEP2>N/A</STEP2>
<STEP3>N/A</STEP3>
<STEP4>N/A</STEP4>
<STEP5>N/A</STEP5>
</ACTIVITY>
</MESCheckList>

Mes_Conf.xml

<MESConf>
<ACTIVITY>
<PROCESS>Load BOM from SAP and validate CRD</PROCESS>
<OPTION>Product -> BOM</OPTION>
<RESPONSIBLE>Planning</RESPONSIBLE>
</ACTIVITY>
<ACTIVITY>
<PROCESS>Create Assemblies</PROCESS>
<OPTION>Product -> BOM -> Assemblies&#xD;&#xA;Product -> Assembly</OPTION>
<RESPONSIBLE>Planning &#xD;&#xA;Note: If assembly belongs to a non-existence family, this must be created.</RESPONSIBLE>
</ACTIVITY>
</MESConf>

MES.html

<html>

<script>
function alternate(id)
{
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows.className = "even";
}else{
rows.className = "odd";
}
}
}
}


function testclick(field)
{
var row=field.rowIndex;
mescfg.recordset.absoluteposition=row;
td_process.innerHTML=mescfg.recordset("PROCESS");
td_option.innerHTML=mescfg.recordset("OPTION");
td_responsible.innerHTML=mescfg.recordset("RESPONSIBLE");
}

</script>

<style type="text/css">

table.sample {
border-width: 1px;
border-style: solid;
border-color: gray;
font-family: Tahoma;
font-size: 8pt;
border-collapse: collapse;
}

td.bold{font-weight: bold;}
td.hidden{display:none;}

}

.odd {background-color: white;}
.even {background-color: #CCCCCC;}

</style>

<xml id="meschk" src="MES_CheckList.xml"></xml>

<body onload="alternate('tblmeschk')">

<table border=1 class="sample" datasrc="#meschk" id="tblmeschk">
<tr>
<td class="bold"><span datafld="AREA"></span></td>
<td><span datafld="STEP1"></span></td>
<td><span datafld="STEP2"></span></td>
<td><span datafld="STEP3"></span></td>
<td><span datafld="STEP4"></span></td>
<td hidden><span datafld="STEP5"></span></td>
</tr>
</table>
<BR>

<xml src="MES_Conf.xml" id="mescfg" async="false"></xml>

<p>
Process:
<span datasrc="#mescfg" datafld="PROCESS"></span>
<br />Option:
<span datasrc="#mescfg" datafld="OPTION"></span>
<br />Responsible:
<span datasrc="#mescfg" datafld="RESPONSIBLE"></span>
</p>



</body>
</html>

 
Upvote 0 Downvote
[1] Script the table like this.
[tt]
<table border=1 class="sample" datasrc="#meschk" id="tblmeschk">
<tr>
<td class="bold"><span datafld="AREA"></span></td>
<td [blue]onclick="testclick(this)"[/blue]><span datafld="STEP1"></span></td>
<td [blue]onclick="testclick(this)"[/blue]><span datafld="STEP2"></span></td>
<td [blue]onclick="testclick(this)"[/blue]><span datafld="STEP3"></span></td>
<td [blue]onclick="testclick(this)"[/blue]><span datafld="STEP4"></span></td>
<td hidden><span datafld="STEP5"></span></td>
</tr>
</table>
[/tt]
[2] Then your dynamic display part like this.
[tt]
<p>
Process:
<span [blue]id="td_process"[/blue] datasrc="#mescfg" datafld="PROCESS"></span>
<br />Option:
<span [blue]id="td_option"[/blue] datasrc="#mescfg" datafld="OPTION"></span>
<br />Responsible:
<span [blue]id="td_responsible"[/blue] datasrc="#mescfg" datafld="RESPONSIBLE"></span>
</p>
[/tt]
[3] The function testclick().
[tt]
function testclick(field)
{
var row=field.[blue]parentNode.[/blue]rowIndex;
mescfg.recordset.absoluteposition=row;
td_process.innerHTML=mescfg.recordset("PROCESS");
td_option.innerHTML=mescfg.recordset("OPTION");
td_responsible.innerHTML=mescfg.recordset("RESPONSIBLE");
}
[/tt]
 
Upvote 0 Downvote
it works!!! but what would be the way to make it work by getting a diferent value per cell of course mescfg xml database would have more records so they can match a record per table's cell
 
Upvote 0 Downvote
[4]>...but what would be the way to make it work by getting a diferent value per cell...
Sure, you can. But to make up an application, where is the motivation. Let me make an "idiotic" use, like this.

[4.1] MES_CheckList.xml : remain the same.

[4.2] MES_config.xml: add two entries.
[tt]
<MESConf>
<ACTIVITY>
<PROCESS>Load BOM from SAP and validate CRD</PROCESS>
<OPTION>Product -> BOM</OPTION>
<RESPONSIBLE>Planning</RESPONSIBLE>
[blue]<controller>MrX</controller>
<comptroller>MsY</comptroller>[/blue]
</ACTIVITY>
<ACTIVITY>
<PROCESS>Create Assemblies</PROCESS>
<OPTION>Product -> BOM -> Assemblies&#xD;&#xA;Product -> Assembly</OPTION>
<RESPONSIBLE>Planning &#xD;&#xA;Note: If assembly belongs to a non-existence family, this must be created.</RESPONSIBLE>
[blue]<controller>MsA</controller>
<comptroller>MrB</comptroller>[/blue]
</ACTIVITY>
</MESConf>
[/tt]
[4.3] The html using the data illustrating the principle.
[tt]
<html>
<head>
<script>
function alternate(id)
{
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows.className = "even";
}else{
rows.className = "odd";
}
}
}
}

function testclick(field)
{
[blue]var row=field.parentNode.rowIndex;[/blue]
mescfg.recordset.absoluteposition=row;
td_process.innerHTML=mescfg.recordset("PROCESS");
td_option.innerHTML=mescfg.recordset("OPTION");
td_responsible.innerHTML=mescfg.recordset("RESPONSIBLE");
[blue]var column=field.cellIndex;
var index=3+column%2;
td_incharge.innerHTML=mescfg.recordset(index);[/blue]
}
</script>
<style type="text/css">
table.sample {
border-width: 1px;
border-style: solid;
border-color: gray;
font-family: Tahoma;
font-size: 8pt;
border-collapse: collapse;
}
td.bold{font-weight: bold;}
td.hidden{display:none;}
.odd {background-color: white;}
.even {background-color: #CCCCCC;}
</style>
</head>
<body onload="alternate('tblmeschk')">
<xml id="meschk" src="MES_CheckList.xml"></xml>
<table border=1 class="sample" datasrc="#meschk" id="tblmeschk">
<tr>
<td class="bold"><span datafld="AREA"></span></td>
<td onclick="testclick(this)"><span datafld="STEP1"></span></td>
<td onclick="testclick(this)"><span datafld="STEP2"></span></td>
<td onclick="testclick(this)"><span datafld="STEP3"></span></td>
<td onclick="testclick(this)"><span datafld="STEP4"></span></td>
<td [red]class="[/red]hidden[red]"[/red]><span datafld="STEP5"></span></td>
</tr>
</table>
<BR>
<xml src="MES_Conf.xml" id="mescfg" async="false"></xml>
<p>
Process:
<span id="td_process" datasrc="#mescfg" datafld="PROCESS"></span>
<br />Option:
<span id="td_option" datasrc="#mescfg" datafld="OPTION"></span>
<br />Responsible:
<span id="td_responsible" datasrc="#mescfg" datafld="RESPONSIBLE"></span>
[blue]<br />Person in-charge:
<span id="td_incharge"></span>[/blue]
</p>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

smak1
  • Locked
  • Question
add structure to XML
Replies
0
Views
688
smak1
smak1
Bijan Borazjani
  • Locked
  • Question
XML to PDF
Replies
0
Views
783
Bijan Borazjani
Bijan Borazjani
cdr_greg
  • Locked
  • Question
Display XML Line Breaks in Microsoft Word Content Controls
Replies
0
Views
1K
cdr_greg
cdr_greg
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
1
Views
740
atlopes
atlopes
SitesMasstec
  • Locked
  • Question
XML data not displaying
Replies
2
Views
756
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top