Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Convert an XML node into HTML

    Not sure best place to post this since it uses both XML and javascript...

    I have created an XML menu-system that I am trying to incorporate into a web-page. I have already got the menu part to work, but I am having trouble getting the main screen to "load" from the XML... (BTW: using Firefox 1.5.0.4)

    Sample XML:
    Code:
    <menuItem>
      <header>
        Item 1
      </header>
      <div>
        <p>
          This div would go into the main section on the page
        </p>
        <br />
        <p>
          I want to keep the format of this general so that the XML can be different for each menuItem
        <p>
        <form>
          <label for="textBox">
            Maybe even having custom forms: 
          </label>
          <input type="text" id="textBox" name="textBox" size="20" />
        </form>
      </div>
    </menuItem>
    Then in the js (after I have loaded the entire XML into var xmlMenu):
    Code:
    var xmlFrag = xmlMenu.getElementsByTagName('div')[0];
    var menuFrag = document.createElement('div');
    
    menuFrag.appendChild(xmlFrag);
    menuFrag.id = 'mainSection';
    document.replaceChild(menuFrag, document.getElementById('mainSection'));
    Doing this just displays nothing in the mainSection; however the javascript Console shows no error. Furthermore, looking at the DOM tree (using FF's DOM Inspector) shows that mainSection does have the div from the XML file (including all of the children like the <p>'s). However, whereas the div for the mainSection is considered to be an [object HTMLDivElement] by the inspector, the div from the XML file is just an [object Element], suggesting that it is not parsing the node from the XML file into HTML.

    So my question: Is there a way to grab the contents of an XML node and have it displayed / parsed as HTML? Perhaps getting the XML contents as a string (not sure how / if possible) and then using mainSection.innerHTML = xmlString; ?
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess you could place the HTML elements in the "http://www.w3.org/1999/xhtml" namespace.

    That is, change <div> to <div xmlns="http://www.w3.org/1999/xhtml"> in your sample XML.

  • #3
    New Coder
    Join Date
    Aug 2005
    Location
    Edmonton, Canada
    Posts
    58
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Call it a personalize preference, but I like to keep the XML as a database, not a markup language by filling it with HTML elements. The way that I would go about this is keep the XML as a strict set of data records, read the XML into your browser using JavaScript, then create an XSL processor for IE/FF to import an XSL document, lastly, using the XSL processor that you create transform your desired HTML element with the XML/XSL.

  • #4
    Regular Coder
    Join Date
    Sep 2005
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help...
    zcorpan: I was also thinking that the DTD may have had something to do with it. I had been working with no DTD / DOCTYPE at the time, but even after adding in those definitions (and checking my code to be XHTML compliant) it still was just parsing the "html" elements from the xml document as just basic xml. Still, it was good to just get into the habit of working with a correct DTD...

    ealbrecht: I somewhat agree, which is why I was able to get the rest of the menu system in place. However since this will be an intranet web app. for manufacturing, the main "frame" (actually just a div) will be quite varied depending upon what step in the build process the user is on (the "menu" actually being a listing of build-steps). In one step, it may just be a <p> of instructions with a picture to go along with it; the next may be a form where the user has to scan in the serial number of a part they are installing. Thus XSL wouldn't be quite appropriate for this... In other words, the "html" markup is actually another piece of data housed in the xml database.

    This got me thinking; what I was really after was the "nodeValue" of the <mainpage> element in the xml (I added that element to denote the xml vs. the html markup). However, using normal tags would render the "html" to be child nodes instead of one big chuck of a nodeValue. So to get the "html" made into text, I just needed to "hide" the tags; thus I exchanged <'s with ~'s and >'s with `'s (both characters on the tilda-key on the keyboard). So <div> became ~div` (substitution made easy by the search/replace function of the IDE I'm using). Then I just used js to parse the nodeValue and assign it to the mainSection.innerHTML:
    Code:
    // Get the nodeValue from the XML (and declare other var's)
    // Note xmlMenuItem is the <mainpage> element of the xml document
    var mainFrame = document.getElementById('mainSection');
    xmlMenuItem.normalize(); // Merge all textNodes into one
    var xmlFrag = xmlMenuItem.firstChild.nodeValue;
    
    // Parse the retrieved nodeValue
    // Not sure if I need to escape these characters, but it doesn't hurt
    xmlFrag = xmlFrag.replace(/\`/g, "\>"); 
    xmlFrag = xmlFrag.replace(/\~/g, "\<");
    mainFrag.innerHTML=xmlFrag;
    mainContainer.replaceChild(mainFrag, mainFrame);
    Doing this works and keeps the "html" stored along with the rest of the menuItem for easy updates to the system / data. The only problem that I could forsee is that the regular-expression parsing may slow down loading the page if there was extensive HTML in that section (no pun intended).
    If you want answers, write a smart question.

    Yes, someone probably does know how...

    Oh, and if you want to learn, STFW!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •