jquery countdown, riavvio on click

[antolaca]

Ciao a tutti, manco da un pò dal forum di Html ma spero che riuscirà ad essere come sempre molto utile. Vi espongo il problema. Utilizzo il jquery countdown plugin (lo trovate qui) per il contatore di un asta al centesimo. Le date per la partenza dei contatori le prelevo con ajax da una pagina php che mi restituisce un array di tipo json. Vi posto il codice:

var listcount = setInterval(function(){ $.ajax({ url: 'timer.php', cache: false, async: false, dataType: 'json', success: function(result){ var year = new Array(); var month = []; var day = []; var hours = []; var minutes = []; var seconds = []; var auctionDate = []; var count = result.length; for (i=0; i<count; i++) { year[i] = result[i].dateend.years; month[i] = result[i].dateend.months; day[i] = result[i].dateend.days; hours[i] = result[i].dateend.hours; minutes[i] = result[i].dateend.mins; seconds[i] = result[i].dateend.seconds; auctionDate[i] = new Date(year[i],month[i]-1,day[i],hours[i],minutes[i],seconds[i]); $('#enddate_' + result[i].id).countdown({until: auctionDate[i], compact: true, format: 'HMS', serverSync: serverTime}); } } }); },1000);

L'array con cui compilo di dati è di questo tipo:

[{"id":"1","dateend":{"years":"2011","months":"3","days":"30","hours":"20","mins":"8","seconds":"44"}},{"id":"2","dateend":{"years":"2011","months":"4","days":"3","hours":"19","mins":"43","seconds":"53"}}]

La pagina che visualizza i contatori contiene questo:

<div id="enddate_1"></div> <div id="enddate_2"></div> <button onclick="clicked(2,2)">punta</button>

Ora il problema è aggiornare il contatore ogni qual volta un utente fa click sul pulsante "punta". Riesco senza problemi ad aggiornare il database inviando dati via ajax ad una pagina php:

jQuery.ajax({ type: "POST", url: "update.php", data: "id="+id+"&bidder="+bidder, async: false, success:function(dati){ } }); }

Ma trovo difficoltà a far eseguire l'aggiornamento del countdown. Pensavo che distruggendo al click il countdown, visto il setInterval della creazione dei contatori riuscissi a risolvere il problema ma non è stato così. In pratica se cancello il countdown al click del pulsante, esso si riparte aggiornato ma lo vedo solo io che ho eseguito la funzione, io vorrei invece che (visto che si tratta di un asta 1 cent) il click del pulsante fosse visto da tutti gli utenti online. Comincio a pensare che il problema sia nel plugin!
Sareste così gentili da darmi un occhio e una dritta su come procedere xkè ci sto sbattendo la testa da 2 giorni e comincio ad esaurire la pazienza.

Grazie a tutti in anticipo e se ho scritto qualche castroneria cazziatemi pure perchè javascript non è proprio il mio forte!!

[cavicchiandrea]

Hai provato senza usare ajax per aggiornare i click "punta"?
Inoltre meglio in questi casi postare la pagina demo da testare.

[antolaca]

Ciao Andrea,
a dire il vero al click del pulsante potrei anche richiamarmi una funzione php e non ajax per aggiornare il database ma non mi risolve il problema dell'aggiornamento del contatore. Ora preparo una pagina demo. Grazie

[antolaca]

Con la preoccupazione di dover passare tutta la notte sullo script mi si è accesa una lampadina (meglio tardi che mai ) e ho risolto creando i countdowns fuori dal setInterval. In pratica il setInterval lo adopero per rilevare costantemente le date poi queste le passo come array ad una funzione che cicla e crea i contdowns con le date aggiornate; solo un piccolo trucco prima di creare i countdown aggiornati utilizzo la funzione destroy del plugin per azzerarli. Finalmente grazie lo stesso, alla prossima!!

[triple h]

Ho lo stesso problema. Il mio non è un sito di aste ma il meccanismo del countdown è praticamente identico: al click su un pulsante Reset, vorrei riavviare il countdown. Il Countdown che riparte ovviamente deve essere visibile a tutti e non solo all'utente che ha effettuato il reset.

Come posso fare?
Ho implementato il countdown con le jquery seguendo i consigli di antolaca.
Ma ora come posso creare questo meccanismo? antolaca aiuto !!!

[triple h]

Sono riuscito a realizzare un countdown di 30 secondi che al click su un bottone viene resettato. Tutto tramite jquery.

Ma adesso come posso fare che tutti gli utenti che visualizzano quella pagina vedano lo stesso countdown ? (l'utente A che visualizza il countdown al secondo 25 e un utente B che si collega in quel momento vedrà il countdown a 25 pure e non a 30 e se clicca sul pulsante RESET sia A che B vedranno il countdown nuovamente a 30)

Pagina HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">

var currentDate, targetDate, timeDif;
var Days, Hours, Minutes, Seconds;
var timer, out;

$(document).ready(function () {
$.getJSON("time.php",function(data) {;
currentDate = data.currentTime;
targetDate = data.targetTime;
init();
})

function init() {
timeDif = targetDate - currentDate;

function updateTime() {
Seconds = timeDif;
Days = Math.floor(Seconds/86400);
Seconds -= Days * 86400;
Hours = Math.floor(Seconds/3600);
Seconds -= Hours * 3600;
Minutes = Math.floor(Seconds/60);
Seconds -= Minutes * 60;
Seconds = Math.floor(Seconds);
}

function tick() {
clearTimeout(timer);
updateTime();
displayTime();

if(timeDif>0)
{
timeDif--;
timer = setTimeout(tick, 1*1000);
}
else {
$("#timeDisplay").html("Fine Esercizio");
}
}

function displayTime() {
out = Days+" Days "+Hours+" Hours "+Minutes+" Minutes "+Seconds+ " Seconds ";
$("#timeDisplay").html(out);
}
timer = setTimeout(tick, 1*1000);
}
});

function refresh() {
$.getJSON("time.php",function(data) {;
currentDate = data.currentTime;
targetDate = data.targetTime;
init();
})

function init() {
timeDif = targetDate - currentDate;
function updateTime() {
Seconds = timeDif;
Days = Math.floor(Seconds/86400);
Seconds -= Days * 86400;
Hours = Math.floor(Seconds/3600);
Seconds -= Hours * 3600;
Minutes = Math.floor(Seconds/60);
Seconds -= Minutes * 60;
Seconds = Math.floor(Seconds);
}

function tick() {
clearTimeout(timer);
updateTime();
displayTime();

if(timeDif>0)
{
timeDif--;
timer = setTimeout(tick, 1*1000);
}
else {
$("#timeDisplay").html("Fine Esercizio");
}
}

function displayTime() {
var out;
out = Days+" Days "+Hours+" Hours "+Minutes+" Minutes "+Seconds+ " Seconds ";
$("#timeDisplay").html(out);
}
timer = setTimeout(tick, 1*1000);
}
}

</script>
</head>

<body>

<div id="timeDisplay"></div><div id="timeDisplay2"></div>
<button onclick="refresh()">RESET</button>

</body>
</html>


PAGINA PHP

<?php

$currentTime = new DateTime("December 25, 2012 8:00:00", new DateTimeZone("America/Anchorage"));
$targetTime = new DateTime("December 25, 2012 8:00:30", new DateTimeZone("America/Anchorage"));


$arr = array("currentTime"=>$currentTime->format("U"), "targetTime"=>$targetTime->format("U"));

echo json_encode($arr);
?>


COME POSSO FAR VEDERE L'AZONE DI RESET/REFRESH FATTA DA UN UTENTE CHE CLICCA SUL PULSANTE A TUTTI GLI UTENTI ONLINE SU QUELLA PAGINA?

[cavicchiandrea]

Se contatore e in una tabella db ad ogni reset aggiorni il campo e con chiamate ajax aggiorni gli utenti connessi, la logica e come le chat

[triple h]

Non ho capito cosa vuoi dire.

[cavicchiandrea]

Non ho letto il codice, ma se il reset cioè il contatore che riparte da 30 e solo lato client viene mostrato solo all'utente che a premuto il tasto è impossibile che altri utenti vedano questa modifica/cambiamento, perché questo accada devi aggiornare un file xml o una tabella di un database sul server e interrogando quest'ultimo tutti gli utenti connessi vedranno la modifica.
L'esempio più calzante (a mio vedere) sono le chat:
l'utente scrive > invia al server > che aggiorna una tabella > che avvisa gli utenti conessi.
Io meglio di cosi non so spiegartelo, se non lo capisci non crucciarti perché ritengo impossibile che poi riusciresti a crearlo (senza offesa ma se non si capisce la logica è impossibile applicarla)

[triple h]

ok la logica ora è chiarissima.
ma lato server dovrei procedere nel file php che avevo postato ?
Lì se vedi nelle variabili di inizio e fine c'è sempre un intervallo di secondi = 30.

Puoi darmi una mano?