My Controller creates a list of links like this
<ul id="MainMenu">
@foreach (var item in Model.MenuItems)
{
<li>@Ajax.ActionLink(item.Caption,
item.ActionName,
item.ControllerName,
new AjaxOptions
{
UpdateTargetId = "pageBody",
OnBegin = "BeginUpdatePage",
OnComplete = "EndUpdatePage",
OnFailure = "FailUpdatePage"
})
</li>
}
</ul>
I have some javascript like this
function BeginUpdatePage() {
$("#MainMenu li").removeClass('selected');
$(this).parent().addClass('selected');
$("#pageBody").fadeTo('slow', 0.5);
}
function EndUpdatePage() {
$("#pageBody").fadeTo('slow', 1);
}
function FailUpdatePage() {
alert('There has been an error loading this page please try again.');
}
in the BeginUpdatePage function line 1 and 3 execute fine, but line 2 "$(this).parent().addClass('selected');" does not visiably do anything... (I have declared that class in my css).
I have looked at Jquery docs (Jquery.ajax()) it says that "this" is the element that was clicked. I have also checked in "jquery.unobtrusive-ajax.js" that was in my project by default. This file also passes "this" when executing my function.
"result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this,arguments);"
What am I doing wrong here... I have seen other examples that have used this technique but I have been failing all day!
How can I get to the element that was clicked, inside my Begin, complete functions.