0

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:!enter image description here

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>

enter image description here

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: enter image description here

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!

Improve this question
2
  • Unclear what you are trying to do?,what you mean by 'I want to represent this xml like an xml file' ??, you can write the XML in Response, that will present your XML, like when we open a xml file in browser Commented Apr 28, 2011 at 10:41
  • I've updated/corrected the question. Commented Apr 28, 2011 at 12:07

3 Answers 3

Reset to default
1

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');

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I can not use any of those examples ... I need to manage this inside my javascript function. I need to display that xmlString in a div element(for example),inside my html page, in a xml format (expandeble/collapse way) - like in the first picture from my post. I've updated/corrected my question.
@ BreakHead: did you forget to write the steps or ...?!
is the xml data you want to write is stored in a xml file??
no, is in a string format; something like var xmlString = "<note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";
My question is, how you get your xml data?, do you read it from xml file, or from database?, or you are getting an object and want to wite it in a XMl format on a page?
|
1

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.

Improve this answer

2 Comments

I've updated/corrected my question. I'm having prototype.js but I do not know exactly how to use it ... "just want to press a button and then the whole page gets turned into an XML" - I want the xml to be included into the html page - like in first picture from my post
IN that case, you'll need to use a JavaScript library that has a tree-like widget. For example, the Dojo ToolKit, YUI, Ext-JS, some jQuery plug-in, Closure, etc. Prototype, as far as I know, does not have a tree widget.
1

I set the xml data in the src attribute:

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.