LoadingElementId in Ajax.BeginForm not displaying the loading image

Question

I have an MVC3 app, and i need to add ajax loading image. I put this on my view

    @using (Ajax.BeginForm(
      "LogOn","Account",
      new AjaxOptions { LoadingElementId = "div_loading" }))

This is my very simple div on the same view:

  <div id="div_loading" style="display:none;">
   <img src="@Url.Content("~/Content/Images/loading.gif")" alt="" />
 </div>

When i click my submit button to post the form back, the loading.gif never appears. My code runs fine, but no loading indicator shows up. And the image is named correctly and in the right place. Does anyone have a clue why?

Update Apparently, this has something to do with Telerik applications. If i create a regular MVC3 app, it works. When i create a Telerik MVC3 app, it doesnt work. Has anyone else encountered this with Telerik?

Answer 1

You could try this as well from: here

function AjaxBegin()
{
    $('#div_loading').show();

}
function AjaxComplete()
{
    $("#div_loading").hide();
}
function AjaxFailure(ajaxContext)
{
    var response = ajaxContext.responseText;
    alert("Error Code [" + ajaxContext.ErrorCode + "] " + response);
}


AjaxOptions:

OnFailure = "AjaxFailure";
OnBegin = "AjaxBegin";
OnComplete = "AjaxComplete";

Answer 2

I prefer to shy away from attaching a loading iamge to every ajax call I make.

The top answer here is a solution to display an ajax spinner (loading image) whenever ajax makes a send call:

Display spinner while waiting For ajax

It has the functionality you need. Just use javascript to attach the display of the image to the ajax calls.

It should be something like:

<script type="text/javascript">
        $(document).ready(function () {
            BindSpinner();
        });

        function BindSpinner() {
            $("#div_loading").bind("ajaxSend", function () {
                $(this).show();
            }).bind("ajaxStop", function () {
                $(this).hide();
            }).bind("ajaxError", function () {
                $(this).hide();
            });
        };
    </script>

What this does is display the div on ajax send and hides it upon ajax stop or error for all calls on your page. If you place this script and the div in your _layout it will do this for every Ajax call on your site.