Question

In ASP.NET MVC, I’m using JSON and jquery to get data for a chart. Is there a way to disable controls and set cursor to wait while data is loading and chart is drawing?
An abstract of my code is

<script type="text/javascript">
     $(document).ready(function () {
            $.getJSON(
                '@Url.Action("JsonPlot", "Home")',
                function (chartData) {
                    var plot1 = $.jqplot('chartdiv', [points], {...});
           });              
        });
</script>

Where can I put

$("*").attr("disabled", "disabled");
$('body').css('cursor', 'wait');

and then

$("*").removeAttr('disabled');
$('body').css('cursor', 'auto');

?

Thanks!

Answer 1

To take full advantage of the jQuery AJAX callbacks, you should use $.ajax:

$.ajax({
    url: '@Url.Action("JsonPlot", "Home")',
    dataType: 'json',
    beforeSend: function() {
        /* Disable UI */
    },
    success: function( data ) {
        /* Update UI using server response */
    },
    complete: function() {
        /* Enable UI again, regardless of whether 
           server call was successful or not*/
    },
    error: function(jqXHR, textStatus) {
        /* Display error message to user */
    }

});