CODEWITHSUNDEEP
c#asp.net-mvc-3
BoundForGlory
BoundForGlory

Reputation: 4417

LoadingElementId in Ajax.BeginForm not displaying the loading image

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?

Upvotes: 6

Views: 22868

Answers (4)

Flavio Rodrigues
Flavio Rodrigues

Reputation: 41

I had the same issue and was able to solve it changing the name of the element to be hidden/shown. I used camel-case format: "myDivToBeHidden"

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

Upvotes: 1

Jason Kulatunga
Jason Kulatunga

Reputation: 5894

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";

Upvotes: 14

Jason Kulatunga
Jason Kulatunga

Reputation: 5894

You might want to try this instead. 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>

Upvotes: 1

Totero
Totero

Reputation: 2574

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.

Upvotes: 6

Related Questions