Ajax.ActionLink in MVC3 Razor and loading gifs not working as expected

Question

I am using AjaxOptions of in an Ajax ActionLink and I figured the loading gif would display within the UpdateTargetId (containerDiv) and it doesn't. I also expected the loading gif to run as long as the LoadingElementDuration, and it doesn't. No matter duration I use - the gif loads and fades out quickly (and appears to shrink as opposed to a straight fade). Am I missing something in my code that is preventing the expected behaviour from happening?

@{
    ViewBag.Title = "Index";
}
 <script type="text/javascript">

     function OnBeginAjax() {

         var item = $("#spanBegin");
         item.text("Begin Request Fired!");

     }

     function OnCompleteAjax() {
         var item = $("#spanComplete");
         item.text("Complete Request Fired!");
     }
    </script>
<h2>Index View</h2>
<div id="spinner_container">
    <img id="spinner" src="@Url.Content("~/content/themes/base/images/ajax-loader.gif")" class="hidden"/>
</div>
<br />
<br />
<span id="spanBegin">Begin Request.....</span><br/>
<span id="spanComplete">Complete Request.....</span>
<div>
@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
               {
                   UpdateTargetId = "containerDiv",
                   LoadingElementId = "spinner",
                   LoadingElementDuration = 100000,
                   OnBegin = "OnBeginAjax",
                   OnComplete = "OnCompleteAjax"

               })
</div>
<div id="containerDiv"></div>

And if what I have (and what I'm seeing) is the expected behaviour (which seems pretty useless) - any ideas on how I would pass the UpdateTargetId as a param to the OnBegin function?

Here's the rendered HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<h1>
    MVC Sandbox Test Site</h1>
<body>
     <script type="text/javascript">
     $(document).ready(function () {
         //            function OnBeginAjax() {
         //                alert("Begin no params");
         //                //               debugger;
         //                //               var item = $("#activityDiv");
         //            }

         //            function OnCompleteAjax() {
         //                alert("Complete no params");
         //            }
     });
     function OnBeginAjax() {
         //alert("Begin no params");
         //               debugger;
         var item = $("#spanBegin");
         item.text("Begin Request Fired!");

     }

     function OnCompleteAjax() {
         var item = $("#spanComplete");
         item.text("Complete Request Fired!");
     }
    </script>
<h2>Index View</h2>
<div id="spinner_container">
    <img id="spinner" src="/content/themes/base/images/ajax-loader.gif" class="hidden"/>
</div>
<br />
<br />
<span id="spanBegin">Begin Request.....</span><br/>
<span id="spanComplete">Complete Request.....</span>
<div>
<a data-ajax="true" data-ajax-begin="OnBeginAjax" data-ajax-complete="OnCompleteAjax" data-ajax-loading="#spinner" data-ajax-loading-duration="100000" data-ajax-mode="replace" data-ajax-update="#containerDiv" href="/Home/AjaxMethod"> &lt;&lt; Fire Ajax Link</a>
</div>
<div id="containerDiv"></div>

</body>
</html>

Putting alot of commented-out code in your sample doesn't really help. :) — bzlm, Apr 02 '12 at 20:01
possible duplicate of [ASP.NET MVC 3 LoadingElementDuration not working?](http://stackoverflow.com/questions/8928671/asp-net-mvc-3-loadingelementduration-not-working) — StriplingWarrior, Apr 02 '12 at 20:56

score 0 · Answer 1 · answered Apr 02 '12 at 20:02

0

You call the functions instead of give their reference:

Change from:

@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
               {
                   UpdateTargetId = "containerDiv",
                   LoadingElementId = "spinner",
                   LoadingElementDuration = 100000,
                   OnBegin = "OnBeginAjax()", /// <<<<<=
                   OnComplete = "OnCompleteAjax()" /// <<<<<=
               })

To:

@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
{
   UpdateTargetId = "containerDiv",
   LoadingElementId = "spinner",
   LoadingElementDuration = 100000,
   OnBegin = "OnBeginAjax", /// <<<<<=
   OnComplete = "OnCompleteAjax"/// <<<<<=
})

AjaxOptions.OnBegin Property

The name of the JavaScript function to call before the page is updated.

MSDN

The same thing for OnComplete(MSDN)

answered Apr 02 '12 at 20:02

gdoron

147,333
58
291
367

which I did, and it made no difference, as I'm seeing the same behaviour as I originally noted. btw, in either example, the onbegin, and oncomplete methods are fired (which is expected). – FiveTools Apr 02 '12 at 20:08
@FiveTools. ummm. Did you add reference to ajax scripts in the views? can you show the rendered HTML? You probably have other problems, but that is one of those for sure. – gdoron Apr 02 '12 at 20:11
Added the rendered HTML to the original question. I was wondering if I was missing an external js library... – FiveTools Apr 02 '12 at 20:14

score 0 · Accepted Answer · edited May 23 '17 at 11:56

I was able to customize the OnBegin function and pass in a parameter that I was able to use in the method that was called:

<div>
@Ajax.ActionLink(" << Fire Ajax Link", "AjaxMethod", new AjaxOptions
               {
                   UpdateTargetId = "containerDiv",
                   LoadingElementId = "spinner",
                   LoadingElementDuration = 100000,
                   OnBegin = "OnBeginAjax('containerDiv')",
                   OnComplete = "OnCompleteAjax"

               })
</div>

In the calling method, I created the jquery to add my loading.gif effect where I wanted it, and for the duration I needed.

Ammendment: How to use $(this) inside MVC3 Ajax.ActionLink OnBegin,OnComplete Events

I ended up implementing the changes found in the above answer to jquery.unobtrusive-ajax.js. IMO much cleaner solution.

Ajax.ActionLink in MVC3 Razor and loading gifs not working as expected

2 Answers2