responseText not evaluated ....

Source is https://www.learnrazorpages.com/razor-pages/ajax/unobtrusive-ajax

When I run it, the alert pops BUT the alert does not evaluate xhr.responseText but processes it as literallyHi ${xhr.responseText}

I notice that the failure mode doesnt use $ in front of the { xhr variable }. I did try removing the $ but no difference. The syntax reminds me of the $ and  { variable} in C#.

I know ajax unobtrusive is installed because data-ajax-confirm does fire on an earlier example from the above site.

Any idea on how the code is made to work ?

@section scripts
{
<script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>
<script>
completed = function (xhr) {
alert('Hi ${xhr.responseText}');
};
</script>
<script>
failed = function (xhr) {
alert('Status: {xhr.status}, Status Text: {xhr.statusText}');
};
</script>

}

Thanks !