Проблема с просмотром объединенных студентов и назначения заданий на панели инструментов учителя ⇐ Javascript

[Anonymous]

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

[*] view inbodated choundations < /strong> < /p>

• Учитель входит в код класса класса , клики «Просмотр объединенных студентов» , и видит список студентов, которые присоединились к классу.

[*] назначение назначений < /strong> < /p>

• Коды классов < /strong> должны быть Заполнен динамически в раскрывающемся списке. Учитель должен быть в состоянии назначить задание выбранному ученику.

Текущие проблемы: < /strong> < /h3>

• Когда я введен код класса и нажмите viewed Студенты , список студентов не обновляется .
• Выпадающий код класса не заполняется динамически.
• Выпачающийся список студента не заполняется при выборе класса. < /Li>
  Назначение назначений не работает. > Реализация кода:

  маршрут колбы (извлечение объединений студентов и заданий)

  Код: Выделить всё

  @app.route('/get_joined_students', methods=['POST'])
  @login_required
  def get_joined_students():
  data = request.json
  class_code = data.get('class_code')
  
  students = User.query.join(ClassEnrollment).filter(ClassEnrollment.class_code == class_code).all()
  
  return jsonify([{'id': student.id, 'name': student.name} for student in students])
  
  @app.route('/get_class_codes', methods=['GET'])
  @login_required
  def get_class_codes():
  classes = Forum.query.filter_by(created_by=current_user.id).all()
  return jsonify([{'id': cls.id, 'class_code': cls.class_code} for cls in classes])
  
  @app.route('/assign_assignment', methods=['POST'])
  @login_required
  def assign_assignment():
  data = request.json
  student_id = data.get('student_id')
  class_code = data.get('class_code')
  title = data.get('title')
  details = data.get('details')
  
  if not (student_id and class_code and title and details):
  return jsonify({'error': 'All fields are required'}), 400
  
  new_assignment = Assignment(student_id=student_id, class_code=class_code, title=title, details=details)
  db.session.add(new_assignment)
  db.session.commit()
  
  return jsonify({'message': 'Assignment assigned successfully'})
  

  javascript (извлечение данных и обновление UI)

  Код: Выделить всё

  document.getElementById("viewJoinedBtn").addEventListener("click", function() {
  const classCode = document.getElementById("classCode").value;
  
  fetch("/get_joined_students", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ class_code: classCode })
  })
  .then(response => response.json())
  .then(data => {
  const studentList = document.getElementById("joinedStudentsList");
  studentList.innerHTML = "";
  data.forEach(student => {
  const li = document.createElement("li");
  li.textContent = student.name;
  studentList.appendChild(li);
  });
  })
  .catch(error => console.error("Error fetching students:", error));
  });
  
  document.addEventListener("DOMContentLoaded", function() {
  fetch("/get_class_codes")
  .then(response => response.json())
  .then(data => {
  const classSelect = document.getElementById("classCodeSelect");
  data.forEach(cls => {
  const option = document.createElement("option");
  option.value = cls.class_code;
  option.textContent = cls.class_code;
  classSelect.appendChild(option);
  });
  })
  .catch(error => console.error("Error fetching class codes:", error));
  });
  
  document.getElementById("assignBtn").addEventListener("click", function() {
  const classCode = document.getElementById("classCodeSelect").value;
  const studentId = document.getElementById("studentSelect").value;
  const title = document.getElementById("assignmentTitle").value;
  const details = document.getElementById("assignmentDetails").value;
  
  fetch("/assign_assignment", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ class_code: classCode, student_id: studentId, title, details })
  })
  .then(response => response.json())
  .then(data => alert(data.message))
  .catch(error => console.error("Error assigning assignment:", error));
  });
  < /code>
    Устранение неисправностей, выполненных до сих пор: < /strong> < /h3>
  
   Проверенные запросы базы данных - студенты и коды классов существуют .
  [*] Отлаживается javaScript с использованием console.log () 

  - вызовы API выполняются, но не обновляют пользовательский интерфейс.
• Проверенная сеть Запросы - /get_joined_students < /code> и /get_class_codes < /code> возвращать ожидаемые результаты, но UI не обновляется. < /li>
  < /ol>
  Вопрос: < /strong> < /h3>
  Что может вызвать: < /p>
  
  Список студентов не обновляет < /strong> при входе Код класса? >

Любые предложения по отладки или улучшению этой логики?


Подробнее здесь: https://stackoverflow.com/questions/794 ... r-dashboar