Generated Code is correct, but doesn't work

Discussion in 'JavaScript' started by powerb29, Nov 1, 2006.

0
  1. #1
    The following code, takes an xml file, generates a table with it and inserts it into the current html document.

    When the code is run under IE 6 the generated code is not displayed correctly. The table layout is different and the onclick function doesn't get called. However if I copy the generated html page and create a new page with the same generated code (removing the 'onload' property in the body element), it works perfectly.

    It works perfectly on Firefox, haven't tried it on other browsers.

    Any help would be appreciated.

    xml file (IETestProblem.xml)

    
<filelist path="">
   <file name= "http://www.webdeveloper.com/forum/images/webdev-logo2.gif" id="22" height="63" width="200" text="Text" date="Jan 17 2006">
   </file>
   <file name= "http://us.i1.yimg.com/us.yimg.com/i/ww/news/2006/10/31/ghost_costume_lg.jpg" id="23" height="117" width="156" text="Text" date="Jan 17 2006">
   </file>
   <file name= "http://us.i1.yimg.com/us.yimg.com/i/ww/news/2006/10/31/dubai_skyscraper2_lg.jpg" id="24" height="117" width="156" text="Text" date="Jan 15 2006">
   </file>
</filelist>
    HTML:

    Html javascript file (IETestProblem.html)

    
<html>
<head>

<script type="text/javascript">

var ELEMENT_NODE = 1;

function loadThumbnailDocument (xmlDoc) {
    if (document.implementation.createDocument) {
        //for some reason firefox and ie have different values for 'this'
        xmlDoc = this;
    }

    var filelist = xmlDoc.getElementsByTagName('filelist');
    var path = filelist[0].getAttribute('path');
    var files = filelist[0].childNodes;
    new ThumbnailProcessor(files, path);
}

function ThumbnailProcessor (files, path) {
    //get the main table.
    var theTable = document.getElementById("table1");

    //remove all children of old table body
    var oldtablebody;
    if (oldtablebody = document.getElementById("thumbnailtablebody")) {
        while (oldtablebody.hasChildNodes()) { // while tbody has datarow elements
            oldtablebody.firstChild.firstChild.nodeValue = null;
            oldtablebody.firstChild.lastChild.nodeValue = null;
            while (oldtablebody.firstChild.hasChildNodes()) {
                oldtablebody.firstChild.removeChild(oldtablebody.firstChild.firstChild);
            }
            oldtablebody.removeChild(oldtablebody.firstChild);
        }
        theTable.removeChild(oldtablebody);
    }

    //create new table body
    var tablebody = document.createElement("tbody");
    tablebody.id = "thumbnailtablebody";
    tablebody.name = "thumbnailtablebody";

    this.files = files;
    this.path = path;
    for (i=0; i < files.length; i++) {
        if (this.files[i].nodeType == ELEMENT_NODE) {
            var file = files[i];
            processEntry(file, path, theTable, tablebody);
        }
    }
    //add the body to the table
    theTable.appendChild(tablebody);
}

function loadxmlfile (callback) {
    var xmlfile = "IETestProblem.xml";
    var xmlDoc;
    if (document.implementation.createDocument) {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = callback;
        xmlDoc.load(xmlfile);
    } else if (window.ActiveXObject) {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.load(xmlfile);
        callback(xmlDoc);
    }
}

function initThumbnails () {
    loadxmlfile(loadThumbnailDocument);
}

function processEntry (file, path, mytable, mytablebody) {

    var fileId = file.getAttribute('id');
    var fileDate = file.getAttribute('date');
    var fileName = file.getAttribute('name');
    var fileWidth = file.getAttribute('width');
    var fileHeight = file.getAttribute('height');
    var imageFileName = fileName;

    var tablerow = document.createElement("tr");

    //first table data, contains the image
    var tablecell = document.createElement("td");
    tablecell.setAttribute("align", "center");
    tablecell.setAttribute("rowspan", "2");

    var imglink = new Image(fileWidth, fileHeight);
    imglink.src = imageFileName;
    imglink.setAttribute("border", "0");
    //imglink.setAttribute("style", "cursor:pointer");
    imglink.setAttribute("onclick", "new ImageProcessor('" + path + "', '" + fileName + "')");

    tablecell.appendChild(imglink);
    tablerow.appendChild(tablecell);

    //second table data
    tablecell = document.createElement("td");
    tablecell.setAttribute("align", "center");
    tablecell.setAttribute("valign", "bottom");
    var fontlink = document.createElement("font");
    fontlink.setAttribute("size", "2");
    fontlink.setAttribute("color", "003399");

    var alink = document.createElement("a");
    var textNode = document.createTextNode(fileDate);
    alink.setAttribute("onclick", "new ImageProcessor('" + path + "', '" + fileName + "')");
    //alink.setAttribute("style", "cursor:pointer");
    //fontlink.appendChild(textNode);
    alink.appendChild(textNode);
    fontlink.appendChild(alink);
    tablecell.appendChild(fontlink);

    tablerow.appendChild(tablecell);
    mytablebody.appendChild(tablerow);

    tablerow = document.createElement("tr");

    //third table data
    tablecell = document.createElement("td");
    tablecell.setAttribute("align", "center");
    tablecell.setAttribute("valign", "top");
    alink = document.createElement("a");
    alink.setAttribute("onclick", "new ImageProcessor('" + path + "', '" + fileName + "')");
    //alink.setAttribute("style", "cursor:pointer");
    fontlink = document.createElement("font");
    fontlink.setAttribute("size", "2");
    fontlink.setAttribute("color", "003399");
    textNode = document.createTextNode(fileName);
    alink.appendChild(textNode);
    fontlink.appendChild(alink);
    tablecell.appendChild(fontlink);

    tablerow.appendChild(tablecell);
    mytablebody.appendChild(tablerow);

}
</script>
</head>
<body onload="initThumbnails();">

<div align="left" id="content">
    <table width=99% border=0 id="table1">
    </table>
</div>

</body>
</html>
    Code (markup):

     
    powerb29, Nov 1, 2006 IP
  2. powerb29

    powerb29 Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Doesn't anyone have an idea?
     
    powerb29, Nov 13, 2006 IP