Populating a combobox from an XML file

Discussion in 'Javascript' started by Billy Smith, Jul 18, 2005.

  1. Billy Smith

    Billy Smith Guest

    How do you go about populating a select list from an XML file?

    I can open the XML file fine and get at all of the data, but I'm stuck on
    how to use that data in my <option> tags. Is it even possible?

    Thanks.
     
    Billy Smith, Jul 18, 2005
    #1
    1. Advertising

  2. Billy Smith wrote:

    > How do you go about populating a select list from an XML file?
    >
    > I can open the XML file fine and get at all of the data, but I'm stuck on
    > how to use that data in my <option> tags. Is it even possible?


    It depends on the browser how you do it, or how you finally do it
    depends on what browsers you target.

    If you look at Mozilla or at Opera 8 which have their own combined XML
    and HTML DOM implementation then you simply need to make sure you put
    XHTML <option> elements in the XML by using the proper namespace and
    then you can use the importNode method to import the nodes from the XML
    DOM document into your HTML document and use appendChild to insert the
    elements into the <select>, e.g.

    // parsing X(HT)ML from string here for the example
    // but could of course load/parse from a URL
    var xmlDocument = new DOMParser().parseFromString(
    [
    '<dt:data xmlns:dt="http://example.com/2005/dt"',
    ' xmlns="http://www.w3.org/1999/xhtml">',
    '<option>Kibo</option>',
    '<option>Xibo</option>',
    '<option>Jaffo</option>',
    '</dt:data>'
    ].join('\r\n'),
    'application/xml'
    );
    var select = document.createElement('select');
    var options = xmlDocument.getElementsByTagNameNS(
    'http://www.w3.org/1999/xhtml',
    'option'
    );
    for (var i = 0; i < options.length; i++) {
    select.appendChild(
    select.ownerDocument.importNode(options, true));
    }
    document.body.appendChild(select);


    With IE the problem is that IE itself implements the HTML DOM and the
    XML DOM is implemented by MSXML and script simply uses MSXML as an
    ActiveX component, there is no importNode to move nodes from one DOM
    implementation to the other, and even if you use the proper XHTML
    namespace then in MSXML's XML DOM you simply have some Element nodes but
    not HTMLElement or HTMLOptionElement nodes. So with IE you would need to
    write some importNode yourself which traverses the XML DOM and creates
    the necessary HTML DOM nodes or you could consider to treat the input as
    a markup string which you assign the innerHTML of the select. But the
    latter does strange things here for me with IE 6 on Windows XP SP 2, it
    does not look like setting innerHTML on the select is a working approach
    to get any options to show up.


    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jul 18, 2005
    #2
    1. Advertising

  3. Billy Smith

    VK Guest

    Martin Honnen wrote:
    > With IE the problem is that IE itself implements the HTML DOM and the
    > XML DOM is implemented by MSXML and script simply uses MSXML as an
    > ActiveX component, there is no importNode to move nodes from one DOM
    > implementation to the other, and even if you use the proper XHTML
    > namespace then in MSXML's XML DOM you simply have some Element nodes but
    > not HTMLElement or HTMLOptionElement nodes. So with IE you would need to
    > write some importNode yourself which traverses the XML DOM and creates
    > the necessary HTML DOM nodes or you could consider to treat the input as
    > a markup string which you assign the innerHTML of the select. But the
    > latter does strange things here for me with IE 6 on Windows XP SP 2, it
    > does not look like setting innerHTML on the select is a working approach
    > to get any options to show up.



    The problem is that IE implements rather strict databinding scheme.
    With a normal XMLData/XMLTemplate scheme there is no problem:

    <?xml version='1.0'?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0">
    <xsl:template match="/">
    <HTML>
    <BODY>
    ....
    <xsl:for-each select="portfolio/stock">
    <SELECT NAME="Portfolio">
    <OPTION><xsl:value-of select="name"/></OPTION>
    </SELECT>
    </xsl:for-each>
    ....
    </xsl:template>
    </xsl:stylesheet>
    (Actually it already works in FF too)

    And for all kind of tabular data (anyhow delimited fields' set) they
    have full set databound elements populating automatically upon new data
    arrival.

    As many browsers do not stay even close to that, users need so far to
    make an equivalend of a stomach surgery through the nostrils (to not
    mention other place :) Thus they load XML to a static HTML page and
    then manually place each peace of info to the right spot.

    If Co & Co hopes to win corporate customers this way, they are sorry
    mistaken. :-(
     
    VK, Jul 18, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Al Wilkerson

    Populating a ComboBox in C#

    Al Wilkerson, Nov 14, 2004, in forum: ASP .Net
    Replies:
    7
    Views:
    134,099
    Waqas
    Aug 22, 2012
  2. Replies:
    2
    Views:
    508
  3. Jason Shohet

    Populating a treeview contol from an xml file

    Jason Shohet, Jul 21, 2003, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    249
    Manfred Braun
    Jul 22, 2003
  4. astan.chee Astan
    Replies:
    1
    Views:
    283
    Steven D'Aprano
    May 4, 2012
  5. Replies:
    5
    Views:
    489
    Roedy Green
    Oct 11, 2012
Loading...

Share This Page