How to display a JQuery progress bar during $.post

Question

There is a button in my MVC view.

<input type="submit" value="Go" title="Go" onclick="JumpToUpdateDate()" />

When user hits the button there is one Controller action being executed by $.post in this method

function JumpToUpdateDate() {
    var enteredDate = $('#updatedDate').val();
    $.post('@Url.Action(MVC.Customers.ActionNames.List)', { JumpToDate: enteredDate, DateChanged: true }, function (data) {
        if (data.NoRecordExistsForTheDate == true) {
            alert('No records were updated on selected date.');
        }
        else {
            $('#CustomerData').html(data);
        }
    }
    );
}

While this Controller action is being executed, I want to display a progress bar so that users can know that there is some process going on. How can I achieve this? Also, it should disappear as soon as the action is completed.

Answer 1

Try this code

 $.ajax({
        url: '@Url.Action(MVC.Customers.ActionNames.List',{data: "JumpToDate": enteredDate, "DateChanged": true },
          beforeSend: function() {                    
                       //display Progress bar here
                },

        success: function (result) {

        },
        async: false,
        cache: false
    });