How to launch Ajax and pass Culture with DropDown Button?

Question

I'm developing a multi-languages app with ASP.NET 7.

I try to use AJAX method to launch the controller, perform necessary changes and change the DOM after loading the view.

The problem is the JavaScript code including AJAX methods is not performed.

Thanks a lot for your support!

In my View, I have the following code:

<button aria-haspopup="true" data-toggle="dropdown" type="button" id="page-header-country-dropdown" aria-expanded="false" class="btn header-item">
  <img src="~/assets/images/flags/gb.svg" class="mh-16" alt="English">
  <span class="ml-2 d-none d-sm-inline-block">EN</span>
</button>
<div aria-labelledby="page-header-country-dropdown" id="countries" class="dropdown-menu-right dropdown-menu">
  <a href="javascript:void(0);" class="dropdown-item">
    <img class="mr-1 mh-12" src="~/assets/images/flags/gb.svg" alt="English">
    <span class="align-middle" data-lang="en">English</span>
  </a>
  <a href="javascript:void(0);" class="dropdown-item">
    <img class="mr-1 mh-12" src="~/assets/images/flags/sp.svg" alt="Spanish">
    <span class="align-middle" data-lang="sp">Español</span>
  </a>
  <a href="javascript:void(0);" class="dropdown-item">
    <img class="mr-1 mh-12" src="~/assets/images/flags/fr.svg" alt="German">
    <span class="align-middle" data-lang="fr">Français</span>
  </a>
  <a href="javascript:void(0);" class="dropdown-item">
    <img class="mr-1 mh-12" src="~/assets/images/flags/tr.svg" alt="Türkçe">
    <span class="align-middle" data-lang="tr">Türkçe</span>
  </a>
</div>

My controller is :

[HttpGet]
public IActionResult ChangeLanguage(string culture) {
  Response.Cookies.Append(
  CookieRequestCultureProvider.DefaultCookieName,
  CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)),
  new CookieOptions(){ Expires = DateTimeOffset.UtcNow.AddYears(1) });
  return Redirect(Request.Headers["Referer"].ToString());
}

When I click on #countries element with dropdown-item, I launch the following AJAX code:

$("#countries .dropdown-item").on("click", function () {
  $.ajax({
    url: '/Client/Home/ChangeLanguage',
    type: 'GET',
    dataType: 'html',
    data: { cultureInfo },
    success: function () {
      $("#countries .dropdown-item").html(response);
      var icon = $(this).children("img").attr("src");
      var lang = $(this).children("span").attr("data-lang");
      lang = lang.toUpperCase()
      $("#page-header-country-dropdown").children("img").attr("src", icon)
      $("#page-header-country-dropdown").children("span").text(lang)
    },
    error: function (xhr, textStatus, errorThrown) {
    }
  });
})

I need to use AJAX to perform the controller and after loading the page, change the DOM with function placed in success. Without AJAX, the DOM will be changed but when the program execute:

return Redirect(Request.Headers["Referer"].ToString());

Placed in the action ChangeLanguage() of the controller, the page is loaded another time and the initial English is loaded. So, the DOM modification is lost.

Why my JavaScript code with AJAX is not performed? What am I doing wrong?