Why is my jQuery wait cursor code not working?
<p>I've got this jQuery in a page:</p>

<pre><code>&lt;script&gt;
$(document).ready(function () {
    $("#btnGetData").click(function () {
        var _begdate = $("#datepickerFrom").val();
        var _enddate = $("#datepickerTo").val();
        var _unit = $("#unitName").text();
        document.body.style.cursor = 'wait';

        $.ajax({
            type: 'GET',
            url: '@Url.RouteUrl(routeName: "QuadrantData", routeValues: new { httpRoute = true, unit = "un", begdate = "bd", enddate = "ed" })'
                  .replace("un", encodeURIComponent(_unit))
                  .replace("bd", encodeURIComponent(_begdate))
                  .replace("ed", encodeURIComponent(_enddate)),
            contentType: 'text/plain',
            cache: false,
            xhrFields: {
                withCredentials: false
            },
            success: function (returneddata) {
                $("body").html(returneddata);
            },
            error: function () {
                console.log('hey, boo-boo!');
            }
        });

        document.body.style.cursor = 'pointer';
    });
});
&lt;/script&gt;
</code></pre>

<p>Note that I try to create a wait cursor early on in the click handler:</p>

<pre><code>document.body.style.cursor = 'wait';
</code></pre>

<p>...and then revert back to the default at the end:</p>

<pre><code>document.body.style.cursor = 'pointer';
</code></pre>

<p>However, it doesn't work - the cursor never changes. The code does work (the ajax call completes successfully), but the cursor remains stonefaced, causing the user to wonder whether anything is happening.</p>

<p>What do I need to do yet to get the cursor to morph into a waiting attitude?</p>