Erro ao Ativar/desativar item selecionado do menu

Desenvolvimento Web
1

image
image1366×768 64.4 KB

Na primeira imagem, é na rota inicial mesmo, as rooms ficam em azul, e quando eu cliclo em qualquer room todas ficam brancas e não fica nenhuma ativada ativada.

1 curtida
2

Precisamos debugar para entender o que está rolando.

1. Verifique primeiro o arquivo: templates/chat/room.html

<li role="button" class="list-group-item" id="room-{{r.id}}" onclick="getMessages('{{r.id}}')">{{r.title}}</li>

É nesse <li> que vamos colocar a class active para pintar de azul ou remover o active para deixar branco. Veja se o seu código está igual ao de cima.

2. Verifique o arquivo: static/js/chatus.js

Nesse javascript, criamos a função responsável por gerenciar manipulação de elemento para pintar de azul ou remover a pintura.

const $chatMessages = Qs(".messages");

const setRoomActive = (room_id) => {
  QsAll(".list-rooms li").forEach((el) => el.classList.remove("active"));
  Qs(`#room-${room_id}`).classList.add("active");
  Qs("#selected-room").value = room_id;
};

const getMessages = async (room_id) => {
  const response = await fetch(`/${room_id}`);
  const html = await response.text();
  $chatMessages.innerHTML = html;
  setRoomActive(room_id);
};

// ...... resto do código abaixo ......

Perceba que temos a função getMessages que é responsavel por fazer a requisição no backend para obter a lista de mensagens de uma sala. Após obter, ele chama o método setRoomActive.

const setRoomActive = (room_id) => {
  // fazer um loop nas tags <li> das salas, e remover a class 'active'
  QsAll(".list-rooms li").forEach((el) => el.classList.remove("active"));

  // adicionar na class da sala selecionada (room_id) o 'active'
  Qs(`#room-${room_id}`).classList.add("active");

  // define o room_id selecionado
  Qs("#selected-room").value = room_id;
};

Agora a ultima verificação está referente ao Qs(#room-${room_id}).classList.add("active");, pois ele só vai funcionar se existir o id="room-{{r.id}}" no

  • do arquivo mencionado no primeiro item aqui nesse tópico (templates/chat/room.html).

    Caso o erro persista

    No site, ative o Developer Tools e abra a aba “Console”.
    Veja se tem algum erro de javascript rolando, pois isso pode impactar no funcionamento de todas as funções subsequentes à linha do erro.

    O conteúdo desse tópico está relacionado ao projeto chat-online do canal @ProgramadorPython

    fonte: GitHub - Iazzetta/chat-online: Curso Django 4.2 - Do Zero à Produção ( Chat Online )