Implementing Language switcher

Question

Here is the used css, I used the booostrap default. It was working with static values which made me partly sure that the problem in the script and HTML part.

 .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem 0; margin: 0.125rem 0 0; font-size: 1rem; color: #212529; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; }.dropdown-item { display: block; width: 100%; padding: 0.25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; background-color: transparent; border: 0; }

I'm trying to implement a language switcher in a web application using Django. I have written the HTML part, and it's showing the current language that I'm using, but for some reason the dropdown menu which contains the flag list is not showing.

This is what I've written so far:

 $("#language-list a").on('click', function (event) { event.preventDefault(); var target = $(event.target); var url = target.attr('href'); var language_code = target.data('language-code'); $.ajax({ type: 'POST', url: url, data: {language: language_code}, headers: {"X-CSRFToken": getCookie('csrftoken')} }).done(function (data, textStatus, jqXHR) { reload_page(); }); });

 <form class="d-flex"> <ul class="navbar-nav mx-0 me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> {% get_current_language as LANGUAGE_CODE %} {% get_available_languages as LANGUAGES %} {% get_language_info_list for LANGUAGES as languages %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="/static/img/flags/{{LANGUAGE_CODE}}.png">&nbsp;<span class="caret"></span></a> <ul class="dropdown-menu" role="menu" id="language-list"> {% for language in languages %} <li> <a href="" data-language-code="{{ language.code }}"> {% if language.code == LANGUAGE_CODE %}&#10003;{% else %}&nbsp;&nbsp;{% endif %} <img src="/static/img/flags/{{ language.code }}.png"> {{ language.name_local }} </a> </li> {% endfor %} </ul> </li> </ul> </form>

Answer 1

I tried getting the language code instead of displaying the flag image and it worked with me

 <form class="d-flex"> {% csrf_token %} <ul class="navbar-nav mx-0 me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Language </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="right: 0; left: -65px;"> {% get_current_language as LANGUAGE_CODE %} {% get_available_languages as LANGUAGES %} {% get_language_info_list for LANGUAGES as languages %} {% for language in languages %} <li><a class="dropdown-item" href="#"> {% if language.code == LANGUAGE_CODE %} selected{% endif %} {{ language.name_local }} ({{ language.code }})</a></li> {% endfor %} </ul> </ul> </form>