Cześć, metodą prób i błędów ogarnąłem odświeżanie elementu strony. Po krótce: z bazy danych pobierana jest data zakończenia licytacji, gdy ktoś złoży ofertę aukcja wydłuża się. Po aukcją jest licznik czasu do końca aukcji - https://github.com/pablog1/JS-Multi-Countdown - użyłem tego licznika
Problem: po przeładowaniu elementu ajaxem, wartość pobrana z bazy danych aktualizuje się, poprawnie wyświetlana jest również w znaczniku
data-Date='<?php echo $datazakonczenialicytacji ?>'
ALE
Poprzednia data nakłada się na nową datę i w miejscu gdzie zwracany jest czas
<div id="licznik" class="countdown simple-bar test_2 text-center text-danger" data-Date='<?php echo $datazakonczenialicytacji ?>' data-endText="Aukcja zakończona">
(hours):(minutes):(seconds)
</div>
Oba przeskakują pomiędzy sobą. Próbowałem już chyba wszystkiego - wyczyścić to pole, skasować nic to nie dało. Nie ukrywam, że jak na moją wiedzę jest to trochę skomplikowane, czy ktoś mógłby mi wskazać jak skasować/wyzerować poprzedni czas. Mimo odświeżenia tego elementu, przeglądarka pamięta poprzednią datę i odlicza do niej, jednoczenie dodając drugą datę.
Tak wygląda cały kod:
<script>
$(function (){
$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(moment.tz(finalDate, "Europe/Warsaw").toDate(), function(event) {
$this.html(event.strftime('%H:%M:%S'));
});
});
$(document).ready(function(){
$(function(){
$('body').click(function(e){
// e.preventDefault();
var form = $(this);
var post_url = form.attr('action');
$.ajax({
type: 'POST',
url: '',
success: function(msg) {
$('#auctiowrapper').fadeOut(800, function(){
form.html(msg).fadeIn().delay(2000);
$('#licznik').removeData('')
});
}
});
});
});
});
});
</script>