Link to home
Create AccountLog in
Avatar of Charlietn
Charlietn

asked on

Help with dynamically created table from XML file

I have been struggling with this code for several weeks. Even with help from ee.   I am an uber novice with jscript and ajax.   I am looking to take an XML file and prepare a table.  This is the code for the page.  It works but I can't make it work the way I want.  

I need to be able to "click" on a cell and return it's contents and row and column so I can run another function (create some textfields) based on what was selected.   The table that is generated is a discount and payment matrix for club membership renewals.   The xml is generated on the server side based on the renewal amount.

There is an error in the code that renders the table because it always skips rows and always returns the same value on the second row.  The first row and the third row are always ignored because it only processes every other row.  (If you click on row 1 or 3, after the header row, nothing happens click on any cell in row 2 and the function is triggered.)

I would appreciate it if someone could tell me where  to alter this to make it work for me, or show me a better way to do it.   I need this to work and have no hair left to pull out.

This is the code for a working page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- DW6 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Matrix</title>
<script language="javascript">

function gettable()
 {                                                                      
   var requestObj = readyAJAX();
    var url = "/matrix.XML?timeStamp=" + new Date().getTime();
   requestObj.open("GET",url,true);
   requestObj.send();
   requestObj.onreadystatechange = function() {
    if (requestObj.readyState == 4) {
        if (requestObj.status == 200) {
            response = requestObj.responseXML;
            displayData(response);
     }  
   }
 }  
}

function readyAJAX() {
    try {
        return new XMLHttpRequest();
    } catch(e) {
        try {
            return new ActiveXObject('Msxml2.XMLHTTP');
        } catch(e) {
            try {
                return new ActiveXObject('Microsoft.XMLHTTP');
            } catch(e) {
                return "A newer browser is needed.";
            }
        }
    }
}

  function displayData(response)  
    {  
    var xmlEl = response.getElementsByTagName("matrixit");
    var table = document.createElement("table");
    table.border = "1";
	table.width="91%";
	table.align="left";
	table.height="50";
	table.overflow="auto";
    var tbody = document.createElement("tbody");
    // Append the body to the table
    table.appendChild(tbody);
    var row = document.createElement("tr");
    // Append the row to the body
    tbody.appendChild(row);
    for (colHead = 0; colHead < xmlEl[0].childNodes.length; colHead++) {
        if (xmlEl[0].childNodes[colHead].nodeType != 1) {
            continue;
        }
        var tableHead = document.createElement("th");
        var colName = document.createTextNode(xmlEl[0].childNodes[colHead].nodeName);
        tableHead.align="left"
		tableHead.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";
		tableHead.style.fontSize = "12px";
		tableHead.style.backgroundColor = "#E0F2F5";
		tableHead.appendChild(colName);
        row.appendChild(tableHead);
    }
    tbody.appendChild(row);
    // Create table row
    for (i = 0; i < xmlEl.length; i++) {
        var row = document.createElement("tr");
        // Create the row/td elements
        for (j = 0; j < xmlEl[i].childNodes.length; j++) {
            // Skip it if the type is not 1
            if (xmlEl[i].childNodes[j].nodeType != 1) {
                continue;
            }
            // Insert the actual text/data from the XML document.
            var td = document.createElement("td");
            var matrix = document.createTextNode(xmlEl[i].childNodes[j].firstChild.nodeValue);
            if (i % 2) {
			 td.style.backgroundColor = "#E0F2F5";
			cellID='R'+[i]+'C'+[j];
            td.setAttribute("id",cellID);
              }
			td.align="Right"
			td.height="15"
			td.style.fontFamily = "Geneva, Arial, Helvetica, sans-serif";    
            td.style.fontSize = "12px";
			td.style.fontstyle = "normal";
			td.onclick=function(){pickit(document.getElementById(this.id).innerHTML);};
			td.appendChild(matrix);
            row.appendChild(td);
        }
        tbody.appendChild(row);
    }
	document.getElementById("matrix").innerHTML="";
    document.getElementById("matrix").appendChild(table);   //xmldata
    }
	
function pickit()
{alert(document.getElementById(this.id))
}

</script>

<style type="text/css">
<!--
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
}
#matrix{
  	float:left;
	width: 60%;
	margin: 0;
	padding: 0 7% 0 0;
   }

-->
</style>

</head>
<HTML>
<body onload="gettable()" bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="#000000" topmargin="20">
<div id="matrix">Content for id "matrix" Goes Here</div>

</body>
</HTML>

Open in new window


This is the xml
<?xml version='1.0' encoding='UTF-8'?>
<mData>
<matrixit>
<Prod>1 Year Renewal</Prod>
<Price>189.00</Price>
<Savings>0.00</Savings>
<One_Pay>189.00</One_Pay>
<Two_Pays>94.50</Two_Pays>
<Three_Pays>63.00</Three_Pays>
<Four_Pays>47.25</Four_Pays>
<Five_Pays>37.80</Five_Pays>
</matrixit>
<matrixit>
<Prod>2 Year Renewal</Prod>
<Price>359.10</Price>
<Savings>18.90</Savings>
<One_Pay>359.10</One_Pay>
<Two_Pays>179.55</Two_Pays>
<Three_Pays>119.70</Three_Pays>
<Four_Pays>89.78</Four_Pays>
<Five_Pays>71.82</Five_Pays>
</matrixit>
<matrixit>
<Prod>3 Year Renewal</Prod>
<Price>510.30</Price>
<Savings>56.70</Savings>
<One_Pay>510.30</One_Pay>
<Two_Pays>255.15</Two_Pays>
<Three_Pays>170.10</Three_Pays>
<Four_Pays>127.58</Four_Pays>
<Five_Pays>102.06</Five_Pays>
</matrixit>
</mData>

Open in new window


Thank you,

Charlie
ASKER CERTIFIED SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Charlietn
Charlietn

ASKER

Thank you so much for the solution and your comments.  I NOW understand what was wrong.