Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds.
In addition, there is another JavaScript code implemented to reveal hidden elements within that item when clicking on the respective div.
Both scripts work flawlessly independently, however, they encounter an issue when combined on the same page. The problem arises after the timeline is updated by setTimeOut; the second code responsible for toggling the visibility of elements upon clicking the div stops functioning. Despite trying various solutions, none have proven successful so far. If anyone has insights into this matter, it would be greatly appreciated. Furthermore, any suggestions on optimizing my timeline, such as updating only when new items are added instead of at set intervals, are also welcome.
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>