how to display XML response from AJAX request in a PRE tag

Question

I am using jquery to make an AJAX request to a web service which responds with XML:

$.ajax({
    type: "GET",
    url: $uri,
    dataType: "xml",
    async: false,
    contentType: "text/xml; charset=\"utf-8\"",
    complete: function(xmlResponse) {
        $("#preForXMLResponse").html(xmlResponse);
    }
});

I want to display the XML response from the web service in a HTML page inside PRE tag. But the code above does not work. How can I change the XML response to a string and display it inside PRE tag?

Solution 1

Try this

$.ajax({
    type: "GET",
    url: $uri,
    dataType: "xml",
    async: false,
    contentType: "text/xml; charset=\"utf-8\"",
    success: function(xmlResponse) {
        $("#preForXMLResponse").html('<pre>'+xmlResponse+'</pre>');
    }
});

Solution 2

Try this:

$(function(){

    $.ajax({
         type: "GET",
         url: $uri,
         dataType: "xml",
         async: false,
         contentType: "text/xml; charset=\"utf-8\"",
         complete: function(xmlResponse) {

                // So you can see what was wrong...
                console.log(xmlResponse);
                console.log(xmlResponse.responseText);

              $("#preForXMLResponse").text(xmlResponse.responseText);
         }
    });

});

Comments

[Richard Knop]

xmlResponse is [object Object]. So all I get in the pre tag is [object Object]. I want the XML as string there.

[Ricardo Souza]

Use the xml property xmlResponse.xml

[Richard Knop]

xmlResponse is not a string, so it will not work. Web service outputs true XML with applciation/xml mime type.