Ajax PUT call resulting in illegal invocation error

Question

I'm trying to modify an existing xml document that i stored from an earlier ajax call into a global variable named "XML".

Now, im trying to change a title in the xml document to be whatever the user wants to change it to. For some reason i keep getting "uncaught type error: Illegal invocation" after my ajax put call, however my success function executes. My code is below:

$("#saveButton").click(function(event) {

    var url = links[$("#nameInput").val()]; //the url of the xml file to be modified

    changeXML(XML); //XML is global variable where i stored the xml file from 'GET' call earlier

    $.ajax({
            url: url,
            data: XML,
            type: 'PUT',
            dataType: 'xml',
            success: window.location.reload()
        });
});
function changeXML(xml){

    var title = $("#titleInput").val();//obtains user input for title change

    $(xml).find('title').first().text(title);//changes title to what user entered


    }

The global variable xml file that i saved is actually being modified, however upon reloading the window, i find that the xml file that the changes are supposed to be put into isnt changing, just the local variable one. What am I doing wrong?

Answer 1

You're reloading the page before the ajax call is made, you have to pass a function to the success parameter, not call one.
window.location.reload() is called before the ajax request is made, wrap it in a function add set that as the success callback.
Also It looks like XML is a jQuery object, you have to convert it to an xml string.

var oSerializer = new XMLSerializer();
var data = oSerializer.serializeToString(XML);
$.ajax({
        ...
        contentType: 'text/xml', //set the content type not the data type
        data: data,
        success: function(){
            window.location.reload();
        }
});