/    Sign up×
Community /Pin to ProfileBookmark

FF problem with Dynamic Table Creation from XML Parse

Copy linkTweet thisAlerts:
Jan 19.2008

Hello all,

I am haveing a bit of an issue. i can seem to get a dynamically created table to work in FF and an XML parser but for some reason i cannot seem to get them to work together in FF. it works great in IE.. any ideas.. here is the final code i have tried using. Also if someone could help assist on how to add a new tr for every 6 td created? thanks in advance.

[code]
<html>
<body onload=”loadXML()”>
<div id=’New_Note’>testing </div>
</body>
<script>
var xmlDoc;
function loadXML(){
var AA = document.getElementById(‘New_Note’);
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
}
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument(“”,””,null);
}
var BB = document.createElement(‘table’);
var CC = document.createElement(‘tbody’);
var DD = document.createElement(‘tr’);
var EE;
xmlDoc.async=”false”;
xmlDoc.load(“note.xml”);
nodes = xmlDoc.getElementsByTagName(“Info”)[0].childNodes;
BB.setAttribute(‘id’,’ff’);
BB.setAttribute(‘name’,’ff’);
BB.setAttribute(‘className’, ‘NN’);
AA.appendChild(BB);
BB.appendChild(CC);
CC.appendChild(DD);
for (i=0;i<nodes.length;i++){
EE=DD.insertCell(-1);
EE.setAttribute(‘id’,nodes[i].getAttribute(“id”));
EE.setAttribute(‘Name’,nodes[i].getAttribute(“name”));
EE.setAttribute(‘className’, ‘ZZ’);
EE.innerHTML=nodes[i].getAttribute(“name”);
DD.appendChild(EE);
}
}
</script>
</html>

[/code]

and here is an examle of the xml file contents

[code]
/// example xml doc

<?xml version=”1.0″ encoding=”ISO8859-1″ ?>
<info>
<client id=”1″ name=”john smith” />
<client id=”2″ name=”jane doe” />
</info>
[/code]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledJan 19.2008 — you got few bug here.
[list]
  • [*]first, boolean value shouldn't be wrote as string [B]xmlDoc.async="false";[/B], remove the quote of [B]false[/B]

  • [*] xml is sentitive to uppercase and lowercase, [B]nodes = xmlDoc.getElementsByTagName("Info")[0].childNodes;[/B], [B]Info[/B] should be wrote as [B]'info'[/B].

  • [*] token shouldn't begin with number, token are some kind of identification. so, on your xml file you assigned id to client tag beggining with number.

  • [*] not every node implement all method of element node. on your [B]nodes[/B] list there is also node of type [B]textNode[/B] which don't implement the [B]getAttribute[/B] method.

  • [*] is true that most html attribute become property on javascript and their equivalence name are the same, but that isn't always true. for html [B]class[/B] attribute on javascript should be wrote as [B]className[/B] but when you're going to set an attribute with DOM method you should write it as if you were writing it on html: [B]EE.setAttribute('className', 'ZZ');[/B].

    • [/list]

    fix those bug and then come back if you need more help.
    Copy linkTweet thisAlerts:
    @pentaceauthorJan 19.2008 — I Apologize... xmlDoc.getElementsByTagName("Info")[0].childNodes; should be xmlDoc.getElementsByTagName("Info");


    you make no Sense I have everything written the way you are saying to write it. there is no difference if i use "" or ''. the XML parsing works fine on top of it. the issue is with the table being created dynamically in FF.

    if i get rid of all the tables and just leave it as the div.innerHTML it parses the info in fine.

    If someone can please assist with the table portion of the script it would be much appreciated
    Copy linkTweet thisAlerts:
    @ZeroKilledJan 19.2008 — honestly, after doing all those patch it worked for me on both browser, firefox and msie. also, my indication about the quote, i know there is no difference within dobule quote or single quote. what i was trying to say was that [B]'false'[/B] is not the same [B]false[/B], the first one is a string while the other is a boolean.

    [code=html]
    <html>
    <body onload="loadXML()">
    <div id='New_Note'>testing </div>
    </body>
    <script>
    var xmlDoc;
    function loadXML(){
    var AA = document.getElementById('New_Note');
    if (window.ActiveXObject)
    {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    }
    else if (document.implementation && document.implementation.createDocument)
    {
    xmlDoc=document.implementation.createDocument("","",null);
    }
    var BB = document.createElement('table');
    var CC = document.createElement('tbody');
    var DD = document.createElement('tr');
    var EE;
    xmlDoc.async=false;
    xmlDoc.load("note.xml");
    nodes = xmlDoc.getElementsByTagName("info")[0].childNodes;
    BB.setAttribute('id','ff');
    BB.setAttribute('name','ff');
    BB.setAttribute('class', 'NN');
    AA.appendChild(BB);
    BB.appendChild(CC);
    CC.appendChild(DD);

    for (i=0;i<nodes.length;i++){
    if(nodes[i].nodeType != 1)continue;
    EE=DD.insertCell(-1);
    EE.setAttribute('id',nodes[i].getAttribute("id"));
    EE.setAttribute('ame',nodes[i].getAttribute("name"));
    EE.setAttribute('className', 'ZZ');
    EE.innerHTML=nodes[i].getAttribute("name");
    DD.appendChild(EE);
    }
    }
    </script>
    </html>
    [/code]
    Copy linkTweet thisAlerts:
    @pentaceauthorJan 20.2008 — I dont know.. thanks for the help.. i was looking in the wrong place i guess.. what was happening is i didnt realize that FF doesnt accept setAttribute('className') so it was working but everything was invisable.. oh well gotta love cross browser thanks again. please dont take the part "you make no sense" the wrong way i had just woken up it was more like what you said i did not undestand exactly.

    Any idea how i would impliment a new TR for every 6 TD elements?
    Copy linkTweet thisAlerts:
    @ZeroKilledJan 20.2008 — i'm guessing you want to fill that table according to amount of client on the xml file. if so, modify your [B]for[/B] loop so that before every cell insertion, it check the length of cell on the row. if your requirement is meeted, then create a new row:

    <i>
    </i>for (i=0;i&lt;nodes.length;i++){
    if(nodes[i].nodeType != 1)continue;
    if(DD.cells.length == 6)var DD = CC.insertRow(CC.rows.length);
    EE=DD.insertCell(-1);
    EE.setAttribute('id',nodes[i].getAttribute("id"));
    EE.setAttribute('ame',nodes[i].getAttribute("name"));
    EE.setAttribute('className', 'ZZ');
    EE.innerHTML=nodes[i].getAttribute("name");
    DD.appendChild(EE);
    }
    Copy linkTweet thisAlerts:
    @pentaceauthorJan 20.2008 — Thanks. what is this for though? if(nodes[i].nodeType != 1)continue;?
    Copy linkTweet thisAlerts:
    @ZeroKilledJan 20.2008 — that will check the type of node currently iterating, if the type is different than the mask [B]1[/B], it will break that iteration continuing with the next. this prevent javascript failing when error occur. if you read again the forth bullet of the list, it state that not every node contain the same method as element node have. so, on your [B]for[/B] loop you're working with method owned from element node. if those method are called on a non-element node javascript will fail.

    also, i noticed a little mistake in the code i posted [B]EE.setAttribute('ame',nodes[i].getAttribute("name"));[/B], should be [B]'name'[/B], not [B]'ame'[/B].
    Copy linkTweet thisAlerts:
    @pentaceauthorJan 20.2008 — yeah i have it all up and functional thanks.. im tired of creating tables and figured it would be easier to learn how to have the work do its self. you have been a great help
    ×

    Success!

    Help @pentace spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...