JavaScript функция должна быть перезагружена для определенных c элементов вместо всей страницы в Django - PullRequest
Новая
       2

JavaScript функция должна быть перезагружена для определенных c элементов вместо всей страницы в Django

0 голосов
/ 15 января 2020

У меня есть следующая форма в Django, и каждый раз, когда пользователь выбирает опцию Finalized, два поля становятся недоступными для редактирования, а когда пользователь выбирает опцию Active, эти два поля снова становятся редактируемыми. Однако, похоже, что это работает только после первой загрузки страницы, затем мне нужно выбрать другой вариант и затем перезагрузить всю страницу, чтобы заставить работать код JS. 

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

<body onload="makeReadOnly();">
  <div id="form-group">
    <form method="POST" action="." enctype="multipart/form-data">
    {% csrf_token %}
      <div class="tweet-composer">
        <label>Insert your task</label>
          {{ form.task|add_class:"card js-keeper-editor" }}
      </div>
     <label>Select your category</label>
      {{ form.category|add_class:"card" }}
     <label>Current points:</label>
      {{ form.points|add_class:"card" }}
     {% endif %}
        <button type="submit" class="btn btn-success">Send</button>
    </form>
  </div>
</body>

{% endblock content %}
<script type="text/javascript">
{% block jquery %}
  function makeReadOnly(){        
      if (document.getElementById('id_status').value == 'Finalized'){
          document.getElementById('id_task').readOnly=true;
          document.getElementById('id_category').readOnly=true;
     }else if (document.getElementById('id_status').value == 'Active'){ 
          document.getElementById('id_task').readOnly=true;
          document.getElementById('id_category').readOnly=false;
  }
{% endblock %}
</script>

enter image description here

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

Ответы [ 3 ]

1 голос
/ 15 января 2020

После вашей функции добавьте следующий оператор: 

document.getElementById('id_status').addEventListener('change', makeReadOnly);

Это свяжет функцию makeReadOnly с событием изменения вашего выпадающего списка и установит статус других ваших полей без перезагрузки .

Это должно быть за пределами функции, как таковое: 

function makeReadOnly() {
  ...
}
document.getElementById('id_status').addEventListener('change', makeReadOnly);
1 голос
/ 15 января 2020

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

Если вы используете jQuery, вы можете легко добиться этого с помощью change() function.

код должен быть таким: 

$(function() {
            $("#id_status").change(function() {
                if ($(this).val() == "finalized") {
                    $("#id_category").prop("disabled", true);
                    $("#id_task").prop("disabled", true);
                }
                else{
                    $("#id_category").prop("disabled", false);
                    $("#id_task").prop("disabled", false);
            });
        });
1 голос
/ 15 января 2020

Вместо использования функции onload тела я бы использовал функцию кнопки onClick.

onLoad будет запускаться только один раз, однако onClick будет запускаться каждый раз при нажатии на соответствующий элемент.

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

Нет похожих вопросов

...