Understanding ajax result in the admin

[MarkE]

Maybe I'm being a bit dim (not unusual ?) but I don't understand the ajax response I get from an admin template. A very simple example is 

function formTest(event) {
    $.ajax(window.location.href, {
        success: function (result) {
            console.log(result);
        }
    })
}

If this is activated in the admin then the result seems to be not the entire html of the current page, but just the DOM under <div id=pw-content-body>. Why is this and how can I get the full HTML?

Or am I being really dim....?

[MarkE]

Adding the following in the ajax request seems to fool PW into responding with the full HTML. 

    xhr: function() {
        // Get new xhr object using default factory
        var xhr = jQuery.ajaxSettings.xhr();
        // Copy the browser's native setRequestHeader method
        var setRequestHeader = xhr.setRequestHeader;
        // Replace with a wrapper
        xhr.setRequestHeader = function(name, value) {
            // Ignore the X-Requested-With header
            if (name == 'X-Requested-With') return;
            // Otherwise call the native setRequestHeader method
            // Note: setRequestHeader requires its 'this' to be the xhr object,
            // which is what 'this' is here when executed.
            setRequestHeader.call(this, name, value);
        }
        // pass it on to jQuery
        return xhr;
    },

Still not worked out where PW is fixing the response. I thought it might be the line in ProcessWire.php:

$config->ajax = (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest');

but commenting that out seems to have no effect.

[Jan Romero]

I think it might help to know what exactly you’re requesting. Some admin pages respond to ajax-requests with JSON and some with partial HTML. I just tested /processwire/access/users/edit/?id=40, which gives the full HTML page without ajax and a partial with ajax. As you said, PW detects ajax requests by the X-Requested-With header, so if you don’t send it or set it to something other than XMLHttpRequest, it should give you the same response you would get when navigating to the url in your browser.

So, for example on the url I mentioned this works for me:

$.ajax(window.location.href, {
    headers: {'X-Requested-With': 'justgivemethedanghtml'},
    success: function (result) {
        console.log(result);
    }
})

I suspect commenting out the line in ProcessWire.php didn’t help because the header is checked again in other places. The culprit is probably ProcessController.php: https://github.com/processwire/processwire/search?l=PHP&q=XMLHttpRequest. But obviously you can’t just comment that stuff out in production anyway. Just make your request pretend it isn’t ajax.

[MarkE]

Thanks for the simple solution @Jan Romero

Now I have the same problem with .load() - you are right that it is ProcessController.php that is causing it.

I want to use .load(document.URL + ' #' + 'wrap_topPropertySelect' + '> *');  but it is outside pw-content-body so doesn't work.

[Jan Romero]

From cursory googling it seems jquery doesn’t support modifying the headers sent by load() specifically. This answer on SO has a somewhat messy solution that is discouraged by the jquery docs: https://stackoverflow.com/a/20067394/. Probably best to just use ajax() and select the elements yourself.

[MarkE]

1 hour ago, Jan Romero said:

Probably best to just use ajax() and select the elements yourself.

Thanks - I had come to the same conclusion. The following appears to achieve the same result as .load() but works when the div is outside pw-content-body

            var id = '#wrap_topPropertySelect';
            $.ajax(window.location.href, {
                    headers: {'X-Requested-With': 'justgivemethedanghtml'},  //:)
                    dataType: "html",
                    type: 'GET', cache: false, success: function (result) {
                        var val = $(result).find(id).html();
                        $(id).html(val);
                    }
                }
            )