Display HTML and XML content on the same HTML page

I have a HTML page in which I have a button; pressing that button a javascript function is called - here results a String which is the representation of an xml. I want to represent this xml on the same page with the button, similar with what is in the picture below:!

Here is the simplified code I've tried but did not worked (see under the code the result of it - nothing displayed):

 <html>
    <head>
        <script type="text/javascript">
        function xml_test()
        {
            var xmlString = "<note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";
            var my_div = document.getElementById("labelId");
            alert(xmlString)
            my_div.innerHTML += xmlString;
        }
        </script>
    </head>

    <body>
        <input type="button" value="TEST" onclick="xml_test()"/>
        <br><br>
        <label id="labelId">XML: </label>
    </body>
    </html>

I've tried with an iframe also, but I do not have an file for the src attribute. What I've tried is:

<html>
<head>
    <script type="text/javascript">
    function populateIframe() {
        var xml = "<?xml version='1.0' encoding='UTF8' standalone='yes'?><note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";

        var iframe = document.getElementById('myIframe');
        var idoc= iframe.contentDocument || iframe.contentWindow.document; // IE compat
        idoc.open("text/xml");  // I know idoc.open(); exists but about idoc.open("text/xml"); I'm not sure if exists; 
        idoc.write('<textarea name="xml" rows="5" cols="60"></textarea>');
        //idoc.write(xml); // doesn't work
        idoc.getElementsByTagName('textarea')[0].value= xml;
        idoc.close();
    }
    </script>
</head>
<body onload="populateIframe();">
    <iframe id="myIframe" width="900" height="400"></iframe>
</body>
</html>

and the result is:

I've already looked over How to display XML in a HTML page as a collapsible and expandable tree using Javascript? I took some ideas from here

Thank you for helping me!

Answers


Just Create am HttpHandler, and open it in a Iframe:

 public class Handler : IHttpHandler
{
    #region IHttpHandler Members

    public bool IsReusable
    {
        get { return true; }
    }

    public void ProcessRequest(HttpContext context)
    {
        XmlSerializer serializer = new XmlSerializer(typeof(Note));
        MemoryStream stream = new MemoryStream();

        StreamWriter writer = new StreamWriter(stream, Encoding.Unicode);
        serializer.Serialize(writer, new Note() { Name = "Kundan Sinha", Place = "Bangalore", State = "Karnataka" });
        int count = (int)stream.Length;

        byte[] arr = new byte[count];
        stream.Seek(0, SeekOrigin.Begin);


        stream.Read(arr, 0, count);


        UnicodeEncoding utf = new UnicodeEncoding();

        stream.Close();
        writer.Close();

        context.Response.ContentType = "text/xml;charset=utf-8";

        context.Response.Write(utf.GetString(arr).Trim()); 

        context.Response.Flush();
    }

    #endregion
}

public class Note
{
    public string Name { get; set; }
    public string Place { get; set; }
    public string State { get; set; }
}

You can pass your received xml string to this where I am doing context.Response.Write('Pass you XML data here');


You must use your favorite JavaScript library with a tree widget to display that XML in tree form.

Note that the "tree-like" view you see is actually IE's default view for XML files. Other browsers will have different views for XML files, and some do not even let you view XML files without a plug-in.

You should not depend on browser-specific functionality if viewing the XML in tree form is important to your page's functionality.

If you, however, just want to press a button and then the whole page gets turned into an XML, then by all means just redirect to that XML URI on button press. IE will show that XML file in tree form, while other browsers may either ask you to download the file, or display the XML file in whatever format that is determined by their plugin's.


I set the xml data in the src attribute:

iframeElement.setAttribute('src', 'data:text/xml,<test>data</test>');

Need Your Help

How to get mobile reistration ID using GSM Titanium?

titanium titanium-mobile

I am developing android app in titanium,by button click event I have to get registration ID from GCM. how to do that I am new to titanium.

vector of Objects having pointer of Object

c++ c vector structure pointer-to-array

Quick question guys, I have the following issue: