JQuery ajaxSubmit response always in lowercase

Question

I am making an ajaxSubmit call to a web service, that will return XML.

When I make a call to the same service using XMLHttpRequest.send, the response is correct. However if I use:

$(form).ajaxSubmit({
        error: function _(response) {
            $(iframeEl).remove();
            config.error.call(scope, Thunderhead.util.JSON.decode(response));
        },
        success: function _(response) {
            console.log(response);
            $(iframeEl).remove();
            var result = response;
            config.success.call(scope, result);
        },
        iframe: true
    });

This returns the correct XML response, but all tags have been transformed to lowercase.

I've checked the call in the Network tab in the developer console, and the case is correct in there, but when it is returned by the ajaxSubmit, it is lowercase.

Does anyone know what is causing this or how to rectify it?

Answer 1

Are you using Malsups jQuery form plugin

This plugin does a lot of toLowerCase transforms, I've not looked too closely but it does seem to lowercase the tag names of something, so this is probably your culprit.

I'd recommend refactoring to using a simple jQuery.ajax() call instead

$(form).on('submit', function(e) {
    var url = $(form).attr('action');
    e.preventDefault();
    $.ajax( url, {
    error: function _(jqXHResponse) {
        // your code
    },
    success: function _(response) {
        console.log(response);
        // your code
    }
});

Answer 2

This might be happening, because js is assuming xml as an answer. There is no difference for most xml-parsers which case is used in xml tag names.

I suggest trying to change response data type.

For example there is such option in jQuery.ajax method: http://api.jquery.com/jquery.ajax/ (named dataType). I would try using "text" dataType if case is really important.

Answer 3

Some further issues arose from this in the end, so just posting my eventual solution in case anyone else has this problem. I'm fairly new to javascript, so this might have been obvious to most, but it might help someone else out.

The success callback can actually take in 3 parameters, the third of which (arg2) is the actual response from the request, without any changes from the Malsups form plugin.

So in the end, the solution was simply to use this third parameter instead of the response parameter.

$(form).ajaxSubmit({
    error: function _(response) {
        $(iframeEl).remove();
        config.error.call(scope, Thunderhead.util.JSON.decode(response));
    },
    success: function _(response, arg1, arg2) {
        console.log(response);
        $(iframeEl).remove();
        var result = response;
        config.success.call(scope, arg2.responseXML);
    },
    iframe: true
});