CODEWITHSUNDEEP
javascriptjqueryxmldom
BuddyJoe
BuddyJoe

Reputation: 71101

Convert String to XML Document in JavaScript

Saw this example on the jQuery examples page for Ajax: 

var xmlDocument = [create xml document];
$.ajax({
        url: "page.php",
        processData: false,
        data: xmlDocument,
        success: someFunction
    });

How do I take a string like:

var t = '<foo><bar>something</bar></foo>';

And convert that to a XML DOM object? cross-browser?

UPDATE: Please see comments to karim79's answer.

Upvotes: 22

Views: 60121

Answers (5)

jabe
jabe

Reputation: 834

You can do the conversion without jQuery. This is taken from Mozilla's DOMParser Documentation:

// Create a DOMParser
var parser = new DOMParser();

// Use it to turn your xmlString into an XMLDocument
var xmlDoc = parser.parseFromString(xmlString, "application/xml");

Upvotes: 7

Sathya
Sathya

Reputation: 5308

rock solid code. working perfectly in all browsers. 

var xmlFields = $("<root><reports name='report 1'><item 
               field='ord_num' desc='Order    Number'/></reports></root>");
alert(xmlFields[0].outerHTML);

Upvotes: 0

Farhad Shekari
Farhad Shekari

Reputation: 2314

you can use this simple code for convert your xml tags to text 

var temp_var = $("<p/>").append($(your_xml_data)).htML()

Upvotes: 0

karim79
karim79

Reputation: 342635

Wrap it in a jQuery object. Then use jQuery's normal DOM manipulation methods on it.

var t = $('<foo><bar>something</bar></foo>');

//loop over 'bar' nodes
t.find('bar').each(function () {
    alert($(this).text());
});

If you want to convert it back to a plain string (after modifying it for example) you can do it like so:

//then convert it back to a string
//for IE 
if (window.ActiveXObject) {
    var str = t.xml;
    alert(str);
 }
// code for Mozilla, Firefox, Opera, etc.
else {
   var str = (new XMLSerializer()).serializeToString(t);
   alert(str);
}

EDIT: The $.ajax manual says (on the processData option):

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.

So if you're passing a jQuery object to the server, you'll need to set that to true, or omit it altogether (it is set to true by default). Hope that helped.

Upvotes: 36

Andy Gaskell
Andy Gaskell

Reputation: 31761

Just a heads up on calling find - if it's a top level element you need to use filter instead.

var t = $('<foo><bar>something</bar></foo>');

//loop over 'foo' nodes
t.filter('foo').each(function () {
  alert($(this).find('bar').text());
});

Upvotes: 11

Related Questions