Calling javascript function on OnSuccess callback of Ajax.actionlink?

Question

I am using MVC5. I am loading images from a list using Unobtrusive Ajax.ActionLink(). Here is the sample code:-

<ul class="list-group list-unstyled lists">
@foreach (var item in Model)
{
<li>
@Ajax.ActionLink(@item.Name,
        @item.Action,
        "Home",
        new {id = @item.Id },
        new AjaxOptions
        {
            UpdateTargetId = "divImage",
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "GET",
            OnSuccess = "enableZoom"
        })
</li>
}
</ul>

OnSuccess callback I call a function 'enableZoom'. It works as long as it is within the script tag of the view page. But When I move enableZoom function to custom.js file, OnSuccess callback can't find or call it.

<script>
    function enableZoom() {
        $("#divImage").zoom({
            on: "grab",
            magnify: "1"
        });
    }
</script>

PS: My custom.js file is loading successfully (confirmed through firebug) and custom.js has other functionality too and that is working. Any clue/help would be appreciated?

I would try to change the name of the function to something unique and try to call it. enableZoom might be defined somewhere else... — Hasan Savran, May 28 '15 at 15:17
Are you including the external js file through a master/normal view, or through the partial? — Mackan, May 28 '15 at 15:28
@Mackan: If i understood you correctly, I have added custom.js into bundleconfig — user1327064, May 28 '15 at 15:33
I misinterpreted your answer. Anyway, for debugging purpose - what if you add `OnComplete = "alert('OnComplete')"` and `OnFailure = "alert('OnFailure')"`. Will either of those get called? — Mackan, May 28 '15 at 15:59

score 0 · Answer 1 · answered May 28 '15 at 18:31

Try to use the following in the seperate js file. Since you are using Jquery functions, you want to be sure that Jquery is loaded before your Js file.

MyNamespace = {} || MyNamespace();
MyNamespace.EnableZoom = function() {
    $("#divImage").zoom({
            on: "grab",
            magnify: "1"
        });
};

You should be able to call this function by MyNamespace.EnableZoom()

OnSuccess = "MyNamespace.EnableZoom"

Give it a try. Good luck.

Calling javascript function on OnSuccess callback of Ajax.actionlink?

1 Answers1