Home/ Questions/Q 7729141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T05:53:38+00:00

I am using AjaxOptions of in an Ajax ActionLink and I figured the loading

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0