3

I have the following link in my MVC Core project: 

<a asp-action="ArtictleDetailsById" asp-controller="Home" asp-route-area="Global" asp-route-id="@Model.Id" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="ArticleDetails" class="btn btn-default">View Details</a>

which is sending and retrieving data as expected but it is not updating the destination element. More specifically when trying to debug, the following gets evaluated and skipped (from jquery.unobtrusive-ajax.js):

 $(element.getAttribute("data-ajax-update")).each(function (i, update) {
        var top;

        switch (mode) {
        case "BEFORE":
            top = update.firstChild;
            $("<div />").html(data).contents().each(function () {
                update.insertBefore(this, top);
            });
            break;
        case "AFTER":
            $("<div />").html(data).contents().each(function () {
                update.appendChild(this);
            });
            break;
        case "REPLACE-WITH":
            $(update).replaceWith(data);
            break;
        default:
            $(update).html(data);
            break;
        }
    });

But the following code will work (replacing the .each() loop): 

update = (element.getAttribute("data-ajax-update"));
$('#'+update).html(data);

I am wondering if there is a known issue with this, a proper fix, or something I am doing wrong. I saw there were some issues in the past regarding the usage of .live(), but that isn't the case here.

willjohnathan
  • 300
  • 3
  • 9

1 Answers1

0

If ArticleDetails is the ID of the target dom element, you should add a "#" character in front of it like this:

<a asp-action="ArtictleDetailsById" asp-controller="Home" asp-route-area="Global" asp-route-id="@Model.Id" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#ArticleDetails" class="btn btn-default">View Details</a>
Pascal R.
  • 2,024
  • 1
  • 21
  • 35