0

Estou criando uma aplicação web onde a página principal é uma timeline, e esta timeline deve atualizar seu conteúdo automaticamente. Estou utilizando a função setTimeOut do JQuery para atualizar a timeline a cada x segundos.

Mas também possuo um outro código JavaScript que serve para mostrar elementos escondidos de tal item ao clicar na div.

Os dois código funcionam perfeitamente quando sozinhos, exceto quando tento utilizar os dois na página. O erro é o seguinte Após a timeline ser atualizada pelo setTimeOut, o segundo código (de clicar na div para mostrar/esconder elementos) não funciona mais. Tentei resolver de várias maneiras e não consegui e também não encontrei por soluções. Alguém sabe o que pode ser? Também aceito dicas de como melhorar a atualização da minha timeline, como por exemplo atualizar somente quando houver novos cadastros de itens, em vez de a cada x segundos.

setTimeout("my_function();", 9000);
    function my_function() {
      $('#timeline').load(location.href + ' #timeline')
    }
    
$(document).ready(function () {
      var itemsDivs = document.querySelectorAll('.timeline-item');
      itemsDivs.forEach(function (itemsDiv) {

        itemsDiv.addEventListener('click', function () {
          var itemId = this.getAttribute('item-id')
          var display = document.getElementById('comment-form-' + itemId).style.display
          if (display == 'none')
            document.getElementById('comment-form-' + itemId).style.display = 'block'
          else
            document.getElementById('comment-form-' + itemId).style.display = 'none'
        })
      })
    })
<div class="container-fluid">
    <div class="row example-basic">
      <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
        <ul class="timeline" id="timeline">
          {% for item in items %}
          <li item-id={{item.id}} class="timeline-item">
            <div class="timeline-info">
              <span>{{item.data.strftime('%c')}}</span>
            </div>
            <div class="timeline-marker"></div>
            <div class="timeline-content">
              <h3 class="timeline-title">{{item.analista}} recomenda {{item.ativo}} a R${{item.preco}}.</h3>
              <p>Fonte:{{item.fonte}}</p>
            </div>
            <div id="comment-form-{{ item.id }}" style="display: none;">
              {{item.coments}} <br><span id='dataalvo'>Data Alvo: {{item.dataalvo}}</span>
            </div>
          </li>
          {% endfor %}
          <li class="timeline-item period">
            <div class="timeline-info"></div>
            <div class="timeline-marker"></div>
          </li>
        </ul>
      </div>
    </div>

OBS: Possuo uma página exclusiva para o cadastro de novos itens ao banco de dados, a timeline retorna os itens existentes no BD.

8
  • Realmente tá bem ruinzinho o código. Misturando jQuery com JS puro. Já que usa jQuery, use-o em todo o código.
    – Sam
    Commented 10/12/2018 às 1:00
  • Tb não entendi porquê vc tá carregando a própria página dentro de uma div: $('#timeline').load(location.href + ' #timeline')
    – Sam
    Commented 10/12/2018 às 1:08
  • 1
    Isso é um erro comum, acontece pq o listener é adicionado ao elemento no início da execução e elementos carregados dinamicamente não rebem-o. Pra resolver você deve adicionar o listener em um outro elemento fixo e observar por ele o evento: $('body').on('.elemento', 'click', function(){}) Commented 10/12/2018 às 1:24
  • $('.elemento').live('click', function(){}) tbm funciona, em versões de jQuery mais novas Commented 10/12/2018 às 1:27
  • @edsonalves O live foi removido a partir da versão 1.9 (veja documentação)
    – Sam
    Commented 10/12/2018 às 10:36

1 Resposta 1

0

O motivo do comportamento é porque você faz o binding do EventListener apenas no carregamento da página... assim os elementos que foram adicionados posteriormente não recebem essa atribuição, você pode destacar aqueles elementos novos que não os receberam ou simplesmente remover e adicionar novamente para todos eles a cada carregamento.

setTimeout(() => {
  $('#timeline').load(location.href + ' #timeline', () => {
    updateBindings();
  });
}, 9000);

let updateBindings = function() {
  var itemsDivs = document.querySelectorAll('.timeline-item');
  itemsDivs.forEach(function(itemsDiv) {

    itemsDiv.addEventListener('click', function() {
      var itemId = this.getAttribute('item-id')
      var display = document.getElementById('comment-form-' + itemId).style.display
      if (display == 'none')
        document.getElementById('comment-form-' + itemId).style.display = 'block'
      else
        document.getElementById('comment-form-' + itemId).style.display = 'none'
    })
  })
};


$(document).ready(function() {
  updateBindings();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row example-basic">
    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
      <ul class="timeline" id="timeline">
        {% for item in items %}
        <li item-id={{item.id}} class="timeline-item">
          <div class="timeline-info">
            <span>{{item.data.strftime('%c')}}</span>
          </div>
          <div class="timeline-marker"></div>
          <div class="timeline-content">
            <h3 class="timeline-title">{{item.analista}} recomenda {{item.ativo}} a R${{item.preco}}.</h3>
            <p>Fonte:{{item.fonte}}</p>
          </div>
          <div id="comment-form-{{ item.id }}" style="display: none;">
            {{item.coments}} <br><span id='dataalvo'>Data Alvo: {{item.dataalvo}}</span>
          </div>
        </li>
        {% endfor %}
        <li class="timeline-item period">
          <div class="timeline-info"></div>
          <div class="timeline-marker"></div>
        </li>
      </ul>
    </div>
  </div>

Também, como mencionado nos comentários, outro ponto de atenção é o conteúdo que você está carregando no método load()... se seu backend não estiver preparado para retornar apenas os items você estaria carregando o conteúdo novamente o conteúdo da página inteira da <ul id="timeline">.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .