CODEWITHSUNDEEP
javascriptjqueryasp.netajaxasp.net-mvc
user1404577
user1404577

Reputation:

How to enable and disable an Ajax.Actionlink

I have the following inside my asp.net mvc razor view:-

<div id="link">
@Ajax.ActionLink("Sync With IT360 >>", "Sync","TechnologyAudit", 
    new AjaxOptions {
 InsertionMode = InsertionMode.Replace,
 UpdateTargetId = "result"  ,
 LoadingElementId = "progress",
 HttpMethod="POST",
 OnBegin="disablelink",
 OnSuccess="enablelink"
}
)
   </div> 
    <p><img src="~/Content/Ajax-loader-bar.gif" class="loadingimage" id="progress" /></p>
<div id="result"></div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    function disablelink() {
        $("link").attr("disabled", "disabled");
    };
    function enablelink() {
        $("link").removeAttr("disabled");
    };
</script>
}

i am trying to disable the Ajax.Actinolink once click on it (to avoid unnecessary duplicate requests), and then to re-enable it once the call is completed. the above is not working and the link will not be disabled ? Can anyone advice ? Thanks

Upvotes: 3

Views: 3809

Answers (3)

Rm558
Rm558

Reputation: 5002

Hide the link, display a loading image. Once complete, display the link. 

@Ajax.ActionLink("Sync With IT360 >>", "Sync","TechnologyAudit", 
    new AjaxOptions {
      OnBegin = "$(this).hide()",
      OnComplete = "$(this).show()",
      LoadingElementId = "imgLoading"
 })

Upvotes: 2

SlightlyMoist
SlightlyMoist

Reputation: 882

An ActionLink is effectively just an anchor element. Anchor elements don't support a disabled property a la buttons.

What you can do however, is temporarily remove the href of the anchor element and then re-add it once the request is completed.

Try this:

First, make sure your ActionLink has an id by the using one of the ActionLink overloads that contains the htmlAttributes parameter.

@Ajax.ActionLink("Sync With IT360 >>", "Sync","TechnologyAudit",
    new AjaxOptions {
      InsertionMode = InsertionMode.Replace,
      UpdateTargetId = "result"  ,
      LoadingElementId = "progress",
      HttpMethod="POST",
      OnBegin="disablelink",
      OnSuccess="enablelink"
    }, new {@id = "ActionLinkId"}
)

Update your Javascript to be something like the following:

<script type="text/javascript">

    var ref = "";

    function disablelink()
    {
        ref = $("#ActionLinkId").attr('href');
        $("#ActionLinkId").attr('href', 'javascript:;')
    };
    function enablelink() {
         $("#ActionLinkId").attr('href', ref)
    };
</script>

Further to this, you can also prevent the mouse cursor from reacting to this link while the content is loading using CSS. By having a CSS class similar to this:

.disabled {
    pointer-events: none;
    cursor: default;
}

You can then add and remove this class to your link inside your two Javascript functions.

Upvotes: 1

jwatts1980
jwatts1980

Reputation: 7356

Well, for starters, you have to have a # in front of the ID: $("#link")

But I'm not so sure you can disabled a div like this. What you can do is create a second tag, like a <span>. 

<span id="linktext">Sync With IT360 >></span>

And have it hidden

#linktext { display: none; }

Then show and hide the two depending on the state

<script type="text/javascript">
    function disablelink() {
        $("#link").hide();
        $("#linktext").show();
    };
    function enablelink() {
        $("#link").show();
        $("#linktext").hide();
    };
</script>

Upvotes: 0

Related Questions