Send JQuery DOM Object as XML to server

After searching Google for hours, I'm still stuck with this problem. Hope you guys can help me out.

I am building an application that lets user design their pages for a photo album. It first loads the standard format for each page using an XML. The XML is loaded through an AJAX call using JQuery as in:

$.get('http://www.domain.com/ajaxcall.php', function(responseXML) {
    $xmlDoc= $(responseXML);
)}

The XML file is now loaded as an object, and I can perform JQuery methods on it, which reduces the amount of code for me.

Editing from the user side is saved in the $xmlDoc. So when a user drags a photo over the page, the new cordinates are saved as an attribute of that photo. After all the user editing has been done, I want to export the new XML and save it to the server. This is where my problem starts. Since I've loaded the XML as a JQuery object (by using $(responseXML)), I can not export it as an XML file anymore. I've checked this by calling $.isXMLDoc($xmlDoc), which responds with false.

Since it was so easy to convert the XML to an object, I guess there must be a way to do the other way around. Any ideas on this?

XML fro开发者_如何学Cm original file:

<pages>
 <page bgcolor="0099cc" titlecolor="f8f8f8" subtitlecolor="000000">
  <title>test</title>
  <subtitle></subtitle>
  <photo id="458267411204" name="" picture="http://www.domain.com/picture.jpg" height="540" width="720" x="25" y="0">
   <creator id="712241204" name=""/>
  </photo>
 </page>
</pages>

I found the solution. I make the Ajax-call as the following:

$.ajax({
  url: "http://www.domain.com/ajaxcall.php"?,
        type: "POST",
        contentType: "application/xml",
        processData: false,
        data: $xmlDoc.context,
        success: function(data) {
         alert('success');
        }
});

Then in ajaxcall.php I process the file and save it to the server:

$xmlcontent = $GLOBALS["HTTP_RAW_POST_DATA"];
$handle = fopen($_SERVER["DOCUMENT_ROOT"].'/userfiles/xml/book.xml', 'wb');
fwrite($handle,$xmlcontent);
fclose($handle);

I'm not quite sure whether it works with XML but with HTML is dose:

$('<div>').append($xmlDoc).html()

I wrote a small fiddle to demonstrate my solution: http://jsfiddle.net/scheffield/3RhhF/

Have a try.

ok It is not as straight forward to serialize the JavaScript object to XML. The GSerializer library can be of use to you
It can be found here

or you should be able to get the HTML from the element to which it was appended by just using .html()

$(".div").html() 

This can be saved into the database