Условная загрузка сценариев с JS для многоязычного django приложения, использующего плагин проверки jquery - PullRequest
0 голосов
/ 25 февраля 2020

У меня есть форма Django, в которой я использую плагин проверки Jquery для проверки. Моя форма должна отображаться на нескольких языках, и я позволяю пользователю изменять язык формы одним нажатием кнопки (одна кнопка для каждого возможного языка). Существует отдельный скрипт для загрузки для каждого языка, позволяющий показывать встроенные сообщения проверки на этом языке. Например, если я хочу, чтобы сообщения проверки по умолчанию от этого плагина были на русском языке, я бы загрузил скрипт "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_ru.min.js".

У меня следующие вопросы:

  1. Должен ли я действительно просто добавлять новые скрипты в раздел заголовка, как я делаю ниже? Затем, если пользователь нажимает кнопки языка назад и вперед, в моем DOM будет куча сценариев, которые совершенно не нужны и просто перезаписываются последним загруженным сценарием. Это проблема c? Плохой стиль? Есть ли лучший способ сделать это?
  2. Я не уверен, что делать, если они нажимают кнопку «Engli sh», потому что в этом случае я должен избавиться от всех остальных языковые сценарии, так что по умолчанию используется Engli sh. Есть ли простой способ go сделать это? Я думал о том, чтобы пройти через все дочерние элементы header и убрать все последние, пока я не вернусь к bootstrap (который является моим последним перед этими сценариями), но потом, если я или кто-то другой решит добавить еще один сценарий в конце там, этот код будет испорчен ...

Может быть, есть какой-то способ указать в заголовке определенный c пробел, который зарезервирован для этих сценариев, и я могу просто заменить или удалить то, что находится в этом месте, в зависимости от того, на какую кнопку нажимает пользователь?

Есть ли способ использовать переменную в источнике скрипта? Они все точно такие же, кроме двух букв, которые задают язык, поэтому я чувствую, что мой код очень избыточен. Я также не уверен, как именно передать элемент, по которому щелкнули мой метод ChangeValidationLanguage.

Код js, который у меня есть для загрузки нужного сценария на основе нажатия кнопки, выглядит следующим образом:

window.onload = function() {
document.getElementsByClassName('btn-outline-secondary').setAttribute('onclick', "ChangeValidationLanguage()");
};

function ChangeValidationLanguage(element) {
         var head = document.getElementsByTagName('head')[0];
         var js = document.createElement("script");

         js.type = "text/javascript";
        if (element.id === '#form_ru') {
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_ru.min.js";
        }
        else if (element.id === '#form_fr'){
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_fr.min.js";
        }
        else if (element.id === '#form_es'){
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_es.min.js";
        }
        else if (element.id === '#form_he'){
            js.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_he.min.js";
        }
        // else{ //if (element.id === '#form_en')
        //     js.src = ""
        // }

        head.appendChild(js);


     }

My кнопки в html выглядят так:

    <div class="language-buttons">       
          <form action="/i18n/setlang/" method="post" id="form_en" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="en" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_en" value="Submit">English </button></a>

          <form action="/i18n/setlang/" method="post" id="form_ru" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="ru" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_ru" value="Submit">Русский </button></a>

          <form action="/i18n/setlang/" method="post" id="form_fr" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="fr" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_fr" value="Submit">français </button></a>

          <form action="/i18n/setlang/" method="post" id="form_es" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="es" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_es" value="Submit">español </button></a>

          <form action="/i18n/setlang/" method="post" id="form_he" style="display:inline!important;">
          <input type="hidden" name="csrfmiddlewaretoken" value="...">
            <input name="next" type="hidden" value="" />
            <input name="language" type="hidden" value="he" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_he" value="Submit">עברית </button></a>

    </div>

Спасибо!

1 Ответ

0 голосов
/ 01 марта 2020

Хорошо. Вместо использования Javascript (так как Sparky выше советовал против этого), я сделал следующее:

Шаг 1: В моем views.py я создал функцию для возврата правильного языка сценарий, основанный на заданном коде языка:

def getLangScript(language_code='en'):
    if language_code == 'ru':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_ru.min.js"
    elif language_code == 'fr':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_fr.min.js"
    elif language_code == 'es':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_es.min.js"
    elif language_code == 'he':
        lang_script = "https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/localization/messages_he.min.js"
    else:
        lang_script = ""
    return lang_script

Шаг 2: Я изменил свои представления, чтобы принять код языка в качестве параметра, с Engli sh по умолчанию в случае отсутствия параметр передан. Я вызываю указанную выше функцию для получения правильного сценария, а затем передаю этот сценарий в контекст, чтобы у меня был доступ к нему в моем шаблоне:

def post_list(request, language_code='en'):
.
.
.
lang_script = getLangScript(language_code)
return render(request, 'template.html', {'form': form, 'lang_script': lang_script})

Шаг 3: Я изменил Мой путь в urls.py принять параметр URL, который будет код языка (то есть 'en' для Engli sh):

urlpatterns = [
    .
    .
    .

    path('test/<str:language_code>/', views.post_list, name='post_list'),
]

Шаг 4: В моем шаблон, я добавил <script src="{{ lang_script }}"></script>, где я хотел, чтобы скрипт загружался, чтобы мои проверки появлялись на другом языке (у меня есть доступ к нему из моего контекста).

Шаг 5: (Вот самая интересная часть!) В элементе ввода с именем «next» я передал URL-адрес, который я хочу перенаправить на параметр WITH language.code. Основываясь на этом параметре, который будет передан представлению, представление вызовет мою функцию getLangScript, выяснит, какой скрипт загружать, и затем передаст этот скрипт в шаблон как переменную контекста. См. Ниже.

<div class="language-buttons">
        {% get_current_language as LANGUAGE_CODE %}
        {% get_available_languages as LANGUAGES %}
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
          <form action="{% url 'set_language' %}" method="post" id="form_{{ language.code }}" style="display:inline!important;">
          {% csrf_token %}
            <input name="next" type="hidden" value="{% url 'post_list' language.code%}" />
            <input name="language" type="hidden" value="{{ language.code }}" />
          </form>
          <a><button class="btn-outline-secondary" type="submit" form="form_{{ language.code }}" value="Submit">{{ language.name_local}} </button></a>
        {% endfor %}
    </div>

Таким образом, когда пользователь нажимает кнопку, в DOM будет загружен соответствующий сценарий, и сообщения проверки из плагина jquery будут отображаться на правильном языке! !

Если у кого-то есть дополнительные комментарии о том, был ли это мудрый способ сделать это или есть более эффективные способы, мне было бы интересно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...