Jquery: Mapping XML Nodes to HTML ID elements

Answer 1

this should get you started on xml parsing..

var xml = '<root><text1>i am in text1</text1><text2>i am in text2</text2></root>';
$(xml)
      .children()
      .each(
            function(){
                       alert(this.nodeName + ':' + $(this).text());
                      }
           );

nodeName is the tag name in xml which you will use as id for the html .. the jquery text method will return the value of the xml node .. (text only)

to load the xml file use

$.get( 
      '/path/to/filename.xml', 
      function(){ 
                 /*runs on success, do the parsing here*/
                },
      'xml'
     ); 

Answer 2

Try this:

$.get ('/path/to/xml', function (data)
{
    $(data).children ().each (function ()
    {
        $('#' + this.nodeName).val ($(this).text());
    });
})

Assumes only 1 level of nesting in the XML.

Answer 3

Actually great input, thanks guys for helping.. it has got me going.

Again, I realise there are templating engines out there, but my next step is to build a little more complexity to be able to say populate a combo box, radio button etc.. just the basics of HTML.. because I am using the DHTMLX components to do any fancy things.. mainly as they seem to have the easiest to understand javascript widgets I have found.. I know ExtJS are catching up with better docco, easier API's etc..

So in Summary, I will have:

1. Fields in a database named the same throughout my system.. so if a database field is called firstname, then the HTML element will be called firstname
2. In my XML that I create from the database, I will add attributes like 'Element Type' which will be say text, radio, combo or whatever, so I know how to populate the values.
3. Then the javascript/JQuery can do what it needs to display the data..

The main reason for all of this is that my partner can just design the page/layout as pure HTML, not worry about XSLT/Templates... and the data simple is populated...

I am sure there must be some "engine/plugin" out there.. but for now I will work on it...

Thanks again...

Answer 4

$(xml).find('foo').each( function() {
  alert (this.text());
});