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 14 of 14
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to convert this XML into HTML?

    I have this XML file:
    PHP Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <Diary>
    <Event EventName="J.Edgar" Classification="2011 Movies" EventStart="2012-03-19T07:00:00+00:00" EventEnd="2012-03-19T08:00:00+00:00" />
    <Event EventName="Titanic" Classification="1997 Movies" EventStart="2012-03-19T09:00:00+00:00" EventEnd="2012-03-19T10:00:00+00:00" />
    ....
    </Diary>
    How can I create an automatic table (with HTML and CSS)? these details of EventName, etc.. are automatic and I need something Dynamic for it.

    I tried using W3 tutorials but didn't manage to get anything out of it. This XML file looks different than regular ones as well.

    Please let me know if you have an idea.
    Many thanks!
    Last edited by tomystein; 03-19-2012 at 12:18 PM.

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Your XML file needs a <root>.

    Say you have this XML file:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <root>
        <Diary>
            <Event EventName="J.Edgar" Classification="2011 Movies" EventStart="2012-03-19T07:00:00+00:00" EventEnd="2012-03-19T08:00:00+00:00" />
            <Event EventName="Titanic" Classification="1997 Movies" EventStart="2012-03-19T09:00:00+00:00" EventEnd="2012-03-19T10:00:00+00:00" />
        </Diary>
    </root>
    This simple demo gets the EventName attribute values from the xml file and displays them in an alert(). Instead of alert(), you can use DOM methods to create a html table of the XML data.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript">
                function loadXMLDoc(fName){
                    if (window.XMLHttpRequest){
                        xhttp=new XMLHttpRequest();
                    } else {
                        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xhttp.open("GET",fName,false);
                    xhttp.send("");
                    return xhttp.responseXML;
                }
    
                xmlDoc=loadXMLDoc("myXML.xml");
    
                function displayEvents(){
                    var eventsO = xmlDoc.getElementsByTagName("Event");
                    var str='';
                    for(i=0; i<eventsO.length; i++){
                        str += eventsO[i].getAttribute('EventName')+"\n";
                    }
                    alert("Event Names:\n\n"+str); //instead of alert, use dom methods to output to <body>
                }
                window.onload=displayEvents;
            </script>
        </head>
        <body>
            <div id="fixed"></div>
        </body>
    </html>
    Last edited by webdev1958; 03-19-2012 at 01:59 PM.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I will try your example. Thank you!

    This is another method (xsl) that I thought for the XML above:

    PHP Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>

    <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="/">
      <html>
      <body>
      <h2>Best Movies</h2>
      <table border="1">
        <tr bgcolor="#9acd32">
          <th>Movie</th>
          <th>Year</th>
        </tr>
        <xsl:for-each select="Event">
        <tr>
          <td><xsl:value-of select="EventName"/></td>
          <td><xsl:value-of select="Classification"/></td>
        </tr>
        </xsl:for-each>
      </table>
      </body>
      </html>
    </xsl:template>

    </xsl:stylesheet>
    Doesn't work.. I don't know how to get to display EventName and etc, I guess..

  • #4
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I tried the code you gave me and I get just a pop up window saying EventNames with no more details..

    I don't know what exactly you mean by DOM attributes, if you can give me an example it will be better, My level for this is not so good.

    Thanks

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by tomystein View Post
    I tried the code you gave me and I get just a pop up window saying EventNames with no more details..

    It works fine in my IE9 and FF11. Post the javascript and xml file you used.


    Quote Originally Posted by tomystein View Post
    Doesn't work.. I don't know how to get to display EventName and etc,
    I would do it like this using the XML file in my previous post. This outputs the event names in a html table.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <script type="text/javascript">
                function loadXMLDoc(fName){
                    if (window.XMLHttpRequest){
                        xhttp=new XMLHttpRequest();
                    } else {
                        xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    xhttp.open("GET",fName,false);
                    xhttp.send("");
                    return xhttp.responseXML;
                }
    
                xmlDoc=loadXMLDoc("myXML.xml");
    
                function displayEvents(){
                    var eventsO = xmlDoc.getElementsByTagName("Event");
                    var tableO = document.createElement('table'), newRow, newCell;
                    for(i=0; i<eventsO.length; i++){
                        newRow = tableO.insertRow(-1);
                        newCell = newRow.insertCell(-1);
                        newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('EventName')));
                    }
                    document.body.appendChild(tableO);
                }
                window.onload=displayEvents;
            </script>
        </head>
        <body>
            
        </body>
    </html>
    It's now only a minor tweak to get the other attributes for each event into the html table.
    Last edited by webdev1958; 03-19-2012 at 02:51 PM.

  • Users who have thanked webdev1958 for this post:

    tomystein (03-19-2012)

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I will try now the code that you wrote here, and tell you..

    What about this code:

    PHP Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>

    <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:template match="Event">
      <html>
      <body>
      <h2>Best movies</h2>
      <p>Here you can find the top movies ever.</p>
      <table border="1">
        <tr bgcolor="#9acd32">
          <th>Movie</th>
          <th>Year</th>
          <th>Start Time</th>
          <th>End Time</th>
        </tr>
        <tr>
          <td><xsl:value-of select="@EventName"/></td>
          <td><xsl:value-of select="@Classification"/></td>
          <td><xsl:value-of select="@EventStart"/></td>
          <td><xsl:value-of select="@EventEnd"/></td>
        </tr>
      </table>
      </body>
      </html>
    </xsl:template>

    </xsl:stylesheet>
    I managed to get something out of it. The result is on the picture:



    I can't manage avoiding the duplication of the table. When I move the template xls around the second tr to make it repeat just this area, I get an error and nothing appears on the screen. But i don't want two H2, P and so many tables.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by tomystein View Post
    What about this code:
    You haven't answered this yet.

    It works fine in my IE9 and FF11. Post the javascript and xml file you used.

  • #8
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Now I am answering...

    I tried your second advice where you create a table and it works fine.. It shows the EventNames and this is what you tried to do there if I am right..

    In order to add more attributes and cells, what should I do? something like this?
    PHP Code:
    newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('EventName').getAttribute('Classification'))); 
    Or

    PHP Code:
    newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('EventName')));
    newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('Classification')));
    newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('EventStart'))); 
    ??

  • #9
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by tomystein View Post

    I tried your second advice where you create a table and it works fine..
    So what was wrong with the first code example I posted that you said didn't work in your browser but worked in mine?

    If you don't want to answer the question I asked earlier, that's your choice and fine but then don't expect me to aswer any more of yours either
    Last edited by webdev1958; 03-19-2012 at 03:25 PM.

  • #10
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    PHP Code:
                        newCell newRow.insertCell(-1);          newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('EventName')));
                
    newCell newRow.insertCell(-1);                  newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('Classification'))); 
    This worked for creating another cell next to the 1st one.
    How do I make a page that looks similar to what I did on the image there?
    And what about the code that I wrote there, not the js..? even if I think that I will go with this one as it looks like a working solution.

  • #11
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    So what was wrong with the first code example I posted that you said didn't work in your browser but worked in mine?

    If you don't want to answer the question I asked earlier, that's your choice and fine but then don't expect me to aswer any more of yours either
    Sorry I didn't mean to not answer your questions i just took your second example because it worked for me and gave me a better solution with a table that I need.

    I probably did a mistake with the code or something. I was using chrome and got a popup (maybe not an error even), just no info. But I guess it was my mistake

  • #12
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can I use this
    PHP Code:
                xmlDoc=loadXMLDoc("cdcatalog.xml"); 
    Also for loading external XML of other sites?

    Like this:
    PHP Code:
                xmlDoc=loadXMLDoc("http://www.example.com/cdcatalog.xml"); 
    ??

    Thanks!!

  • #13
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    this??
    XmlDocument doc = new XmlDocument();
    doc.Load("http://www.servername.com/Sample.xml");

    ?

  • #14
    New Coder
    Join Date
    Nov 2011
    Posts
    59
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Now I got into this situation:
    My xml:

    PHP Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <?xml
    -stylesheet type="text/xsl" href="movies.xsl"?>
    <root>
    <Diary>
    <Event EventName="J.Edgar" Classification="2011 Movies" EventStart="2012-03-19T07:00:00+00:00" EventEnd="2012-03-19T08:00:00+00:00" />
    <Event EventName="Titanic" Classification="1997 Movies" EventStart="2012-03-19T09:00:00+00:00" EventEnd="2012-03-19T10:00:00+00:00" />
    </Diary>
    </root>
    I have this two options for creating what I need:

    1.
    PHP Code:
    <?xml version="1.0" encoding="ISO-8859-1"?>

    <xsl:template match="Event">
      <html>
      <body>
      <h2>Best movies</h2>
      <p>Here you can find the top movies ever.</p>
      <table border="1">
        <tr bgcolor="#9acd32">
          <th>Movie</th>
          <th>Year</th>
          <th>Start Time</th>
          <th>End Time</th>
        </tr>
        <tr>
          <td><xsl:value-of select="@EventName"/></td>
          <td><xsl:value-of select="@Classification"/></td>
          <td><xsl:value-of select="@EventStart"/></td>
          <td><xsl:value-of select="@EventEnd"/></td>
        </tr>
      </table>
      </body>
      </html>
    </xsl:template>

    </xsl:stylesheet>
    2.
    PHP Code:
        <head>
            <
    meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <
    script type="text/javascript">
                function 
    loadXMLDoc(fName){
                    if (
    window.XMLHttpRequest){
                        
    xhttp=new XMLHttpRequest();
                    } else {
                        
    xhttp=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    
    xhttp.open("GET",fName,false);
                    
    xhttp.send("");
                    return 
    xhttp.responseXML;
                }

                
    xmlDoc=loadXMLDoc("movies.xml");

                function 
    displayEvents(){
                    var 
    eventsO xmlDoc.getElementsByTagName("Event");
                    var 
    tableO document.createElement('table'), newRownewCell;
                    for(
    i=0i<eventsO.lengthi++){
                        
    newRow tableO.insertRow(-1);
                        
    newCell newRow.insertCell(-1);
                        
    newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('EventName')));
                        
    newCell newRow.insertCell(-1);
                        
    newCell.appendChild(document.createTextNode(eventsO[i].getAttribute('Classification')));
                    }
                    
    document.body.appendChild(tableO);
                }
                
    window.onload=displayEvents;
            
    </script>
        </head>
        <body>
            
        </body>
    </html> 
    Can you please try to correct me in these codes?

    I would like to do the following things:
    1. load an external xml from another site anl not local.
    2. Have the list of movies and that when you press on a movie, a popup or a new page comes up and you have more info about the movie. But how do I create it dynamically so the information in that pop up will stay the same but the name of the movie will change, based on the movie you clicked..?
    3. the match="Event" is working but maybe it's wrong.. (?)


  •  

    Posting Permissions

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