javascript - Render XML document (obtained through ajax call) to a new window

Question

Hi I'm looking for a way to render an XML document, that I retrieve using ajax, to a new browser window.

I am using JQuery's ajax() function to post JSON data to an MVC controller. The controller returns XML as a string.

I am using window.open() to create a new window in javascript and set the documents content by calling.

newwindow.document.clear();
newwindow.document.            
newwindow.document.write(jqXHR.responseText);
newwindow.document.close();

(Where jqXHR.responseText is the XML returned from the ajax() call.)

The new window opens as expected and if I view source on the page I see my XML. BUT (you knew one was coming) nothing appears in the browser window. Obviously if I save the page source to disk and open the output is rendered as expected.

Can anyone suggest a solution? Just to re-iterate my main goal is to render an XML document (obtained through ajax call) to a new window.

I should also add that I would like to see the output transformed by an XSLT. My XML has this processing instruction. Many Thanks

Edit--------------------------- THE SOLUTION I WENT WITH -------------------------

Thanks for everyone's comments and suggestions.

The solution that I ended up going with was to have a form with target="_blank" I then wrote the JSON to the form as a hidden field, and posted it to my controller which returned the XML (constructed from the JSON). When the XML was returned from the response the browser marked it up as expected. I guess this is not an answer to the original question. But Gabby has a solution below.

Answer 1

The following will work only in FireFox and Opera, but i think is worth mentioning ..

window.open('data:text/xml,' + encodeURIComponent( jqXHR.responseText ) );

should work with chrome as well but it seems to treat window.open differently than a usual URL.. if you just type the resulting url in chrome it works there as well..

---

Update This works with all browsers !

The thing is that javascript has the ability to tranform xml using xslt.
But not automatically, so we need to find the XML file for the reference to the XSLT file and load that as well. Then we can do the transformation in javascript and pass the resulting html to the new window.

Naturally IE handles thing differently than the rest.

$.get('xml-file-here.xml',
   function(xmlData){
                  var xml = xmlData;

                  //extract the stylesheet so we can load it manually
                  var stylesheet;
                   for (var i=0;i<xml.childNodes.length;i++){
                       if ( xml.childNodes[i].nodeName =='xml-stylesheet' )
                       {
                        stylesheet = xml.childNodes[i].data;
                       }
                   }
                  var items = stylesheet.split('=');
                  var xsltFile = items[items.length-1].replace(/"/g,'');

                  //fetch xslt manually
                  $.get( xsltFile, function(xsltData){
                      var xslt = xsltData;
                      var transformed;

                      if (! window['XSLTProcessor'])
                        {
                            // Trasformation for IE
                            transformed = xml.transformNode(xslt);
                        }
                        else
                        {
                            // Transformation for non-IE
                            var processor = new XSLTProcessor();
                            processor.importStylesheet(xslt);
                            var xmldom = processor.transformToDocument(xml);
                            var serializer = new XMLSerializer();
                            var transformed = serializer.serializeToString(xmldom.documentElement);
                        }

                      var newwindow = window.open();
                      newwindow.document.open();
                      newwindow.document.write(transformed);
                      newwindow.document.close();
                  });
   });