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?

have you tried debugging it with firebug? Do you get any errors in your console? — Jason Kulatunga, May 31 '12 at 05:34

score 14 · Answer 1 · edited May 23 '17 at 11:55

14

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

edited May 23 '17 at 11:55

Community

1
1

answered May 30 '12 at 16:41

Jason Kulatunga

5,814
1
26
50

I think the OnBegin might be the way to go, but its not calling my method AjaxBegin. I do it like so new AjaxOptions { OnBegin = "return AjaxBegin()" }) – BoundForGlory May 30 '12 at 16:54
AjaxOptions Events take either a javascript string or a javascript function name, so that should work as long as your AjaxBegin function is on the global namespace. Does it work if you go : new AjaxOptions { OnBegin ="AjaxBegin" } – Jason Kulatunga May 30 '12 at 16:58
@user1202717 Hey, just wanted to follow up and see if this worked out for you? – Jason Kulatunga Jun 05 '12 at 05:36
Absolutely gorgeous. That's what I have been after. – Azhar Khorasany Oct 09 '13 at 12:42
@BoundForGlory Hey, just wanted to follow up and see if this worked out for you? – Jason Kulatunga Oct 09 '13 at 20:44

score 6 · Answer 2 · edited May 23 '17 at 12:34

6

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.

edited May 23 '17 at 12:34

Community

1
1

answered May 30 '12 at 16:15

Totero

2,524
20
34

Thanks for responding. I added this to my _Layout.cshtml and i still didnt see the loader. Is ajaxSend a method i need to create? – BoundForGlory May 30 '12 at 16:25
Seems obvious but is the image loaded into your project? Try setting the alternate text to something to make sure the div is displayed. Oh and make sure your div is in the _layout too. – Totero May 30 '12 at 16:29
Yes, its there. If i remove the style="display:none" and refresh, the gif shows up. Trust me, i looked at that first. – BoundForGlory May 30 '12 at 16:30
Try setting the z-index on the div maybe the image is not loading in front. style='z-index:1234'; – Totero May 30 '12 at 16:34

score 1 · Answer 3 · edited May 23 '17 at 10:30

1

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>

edited May 23 '17 at 10:30

Community

1
1

answered May 30 '12 at 16:26

Jason Kulatunga

5,814
1
26
50

I tried that with my fingers crossed, it didnt work :( I setup a sample project, and it works. I move it to my main project and it doesnt. But this seems so simple. Ive hid and displayed objects before – BoundForGlory May 30 '12 at 16:33
any chance your loading gif isn't being copied to your output directory? Is the Build Action set to Content and Copy To Output set to Copy Always/Copy If Newer? – Jason Kulatunga May 30 '12 at 16:36
I think display:none is correct. I tried both and the way is used in question worked for me. – Pooria Mar 09 '16 at 12:32

score 1 · Answer 4 · answered Jul 18 '16 at 14:18

1

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

answered Jul 18 '16 at 14:18

Flavio Rodrigues

41
4

LoadingElementId in Ajax.BeginForm not displaying the loading image

4 Answers4