Loading ElementId in Ajax.BeginForm does not display boot image

Question

I have an MVC3 application and I need to add an ajax boot image. I put it in my opinion

@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 the submit button to send the form back, load.gif never appears. My code is working fine, but the download indicator is not showing. And the image is named correctly and in the right place. Does anyone know why?

Update Apparently, this is somehow connected with Telerik applications. If I create a regular MVC3 application, it works. When I create a Telerik MVC3 application, it does not work. Has anyone else come across this with Telerik?

Answer 1

You can also try this: 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 downloadable iamge to every ajax call that I make.

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

Show counter while waiting for ajax

It has the necessary functions. Just use javascript to attach the image display to 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> 

This means that the div on ajax sends and hides it when the ajax stops or fails for all calls on your page. If you put this script and div in your _layout, it will do this for every Ajax call on your site.

Answer 3

You might want to try this. I got it from the SO question here

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

Answer 4

I had the same problem and I was able to solve it by changing the name of the element that will be hidden / shown. I used the camel format: "myDivToBeHidden"

The element requires the "display" property set to "none".