refresh div in conflitto con un countdown

**peppeweb** · 14-11-2013, 11:25

Caio a tutti,

utilizzo uno script per effettuare dei countdown a date specifiche ... ho però la necessità di fare un refresh ogni tot secondi per aggiornare la pagina e vedere se sono entrati altri countdown da effettuare.

Visto che lo sfondo della pagina è di colore scuro ogni volta che ricarico la pagina si visualizza un fastidioso bianco.

Allora mi sono chiesto come poter risolvere il problema ..... e ho trovato in rete uno script che permette il refreh soltanto di un DIV ... ma appena metto insieme i due script il coutdown non si visualizza più .... credo che ci sia qualche conflitto tra i due codici ma non so proprio cosa possa essere, sapreste darmi qualche consiglio ?

Pagina principale con lo script di refresh:

codice:

<!doctype html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>CountDown</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("ProvaProva.asp");
var refreshId = setInterval(function() {
$("#responsecontainer").load('ProvaProva.asp');
}, 5000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body>
<div id="responsecontainer"></div>
</body>
</html>

PaginaProva.asp dove c'è il countdown:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Senza nome 1</title>


<script type="text/javascript">
function Timer (oNode, sGMTDate) {
    if (arguments.length < 2) { throw new TypeError("Timer - not enough arguments"); }
    this.expires = Date.parse(sGMTDate) || 0x1f3fffffc18;
    this.owner = oNode;
    Timer.instances.push(this);
}


Timer.refreshAll = function () {
    for (var nDelta, nDLeft, nHLeft, nMLeft, nSLeft, oThis, oDisplay, nInst = 0; nInst < Timer.instances.length; nInst++) {
        oThis = Timer.instances[nInst];
        if (!oThis) { continue; }
        nDelta = oThis.expires - Date.now();
        /* Casual expiration test */
        // if (Math.floor(Math.random() * 8) === 0) { nDelta = 0; }
        if (nDelta <= 0) {
            Timer.instances[nInst] = null;
            oThis.owner.innerHTML = "<span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>Tavolo libero</span>";
            continue;
        }
        //nDLeft = Math.floor(nDelta / 864e5);
        //nDelta -= (nDLeft * 864e5);
        nHLeft = Math.floor(nDelta / 36e5);
        nDelta -= (nHLeft * 36e5);
        nMLeft = Math.floor(nDelta / 6e4);
        nDelta -= (nMLeft * 6e4);
        nSLeft = Math.floor(nDelta / 1e3);
        nDelta -= (nSLeft * 1e3);
        
        if (nHLeft < 10)
        { var hh = "0" + nHLeft; }
        else
        { var hh = nHLeft; }
        
        if (nMLeft < 10)
        { var mm = "0" + nMLeft; }
        else
        { var mm = nMLeft; }
        
        if (nSLeft < 10)
        { var ss = "0" + nSLeft; }
        else
        { var ss = nSLeft; }
        
        oThis.owner.innerHTML = "<span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>" + hh + "</span>  <span style='font-size:40px;'> : </span><span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>" + mm + "</span> <span style='font-size:40px;'> : </span><span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>" + ss + "</span>";
        
    }
};


Timer.instances = [];


Timer.session = setInterval(Timer.refreshAll, 1000);


onload = function () {
    for (var aTimers = document.getElementsByClassName("countdown"), oTimer, nLen = aTimers.length, nItem = 0; nItem < nLen; nItem++) {
        oTimer = aTimers[nItem];
        if (!oTimer.hasAttribute("data-fine")) { continue; }
        new Timer(oTimer, oTimer.getAttribute("data-fine"));
    }
    Timer.refreshAll();
};
</script>
</head>
<body>
<div class="countdown" data-fine="24 Oct 2014 17:20:15 GMT"></div>
<div class="countdown" data-fine="22 Oct 2014 19:26:1 GMT"></div>
<div class="countdown" data-fine="19 Oct 2014 20:18:39 GMT"></div>
</body>
</html>

Grazie mille per la collaborazione

**cavicchiandrea** · 14-11-2013, 13:09

Potrebbe essere perché hai ready e onload che sono equivalenti per non avere sovrascrizioni meglio unire le due cose

**peppeweb** · 14-11-2013, 13:38

Ciao Andrea e grazie per aver risposto ... non saprei come unire i due script, puoi darmi una mano ?

**cavicchiandrea** · 14-11-2013, 14:28

Non ho tempo di ricreare la pagina per testare le integrazioni

**peppeweb** · 14-11-2013, 15:39

Grazie lo stesso ...

**cavicchiandrea** · 14-11-2013, 19:59

Tutto il blocco completo dello script di paginaprova.asp lo metti nella pagina principale (tagli anche i tag script) poi cambi onload cosi:

codice:

function partenza(){for(var aTimers = document.getElementsByClassName("countdown"), oTimer, nLen = aTimers.length, nItem =0; nItem < nLen; nItem++){
        oTimer = aTimers[nItem];
        if(!oTimer.hasAttribute("data-fine")){continue;}
        newTimer(oTimer, oTimer.getAttribute("data-fine"));
    }
    Timer.refreshAll();
};

e modifichi cosi lo script in pagina principale:

Codice PHP:


<script>
$(document).ready(function(){
$("#responsecontainer").load("ProvaProva.asp", function(){partenza()})
var refreshId = setInterval(function(){
$("#responsecontainer").load('ProvaProva.asp', function(){partenza()});},5000);
$.ajaxSetup({ cache:false});
});
</script>

**peppeweb** · 14-11-2013, 21:43

Grazie Andrea, grazie mille per la risposta ma non va, ho provato in tutte le salse ma non riesco a farlo andare....

PaginaProva.asp:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Senza nome 1</title>
</head>
<body>
<div class="countdown" data-fine="24 Oct 2014 17:20:15 GMT"></div>
<div class="countdown" data-fine="22 Oct 2014 19:26:1 GMT"></div>
<div class="countdown" data-fine="19 Oct 2014 20:18:39 GMT"></div>
</body>
</html>

PaginaPrincipale.asp:

codice:

<!doctype html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>CountDown</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
function Timer (oNode, sGMTDate) {
    if (arguments.length < 2) { throw new TypeError("Timer - not enough arguments"); }
    this.expires = Date.parse(sGMTDate) || 0x1f3fffffc18;
    this.owner = oNode;
    Timer.instances.push(this);
}

Timer.refreshAll = function () {
    for (var nDelta, nDLeft, nHLeft, nMLeft, nSLeft, oThis, oDisplay, nInst = 0; nInst < Timer.instances.length; nInst++) {
        oThis = Timer.instances[nInst];
        if (!oThis) { continue; }
        nDelta = oThis.expires - Date.now();
        /* Casual expiration test */
        // if (Math.floor(Math.random() * 8) === 0) { nDelta = 0; }
        if (nDelta <= 0) {
            Timer.instances[nInst] = null;
            oThis.owner.innerHTML = "<span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>Tavolo libero</span>";
            continue;
        }
        //nDLeft = Math.floor(nDelta / 864e5);
        //nDelta -= (nDLeft * 864e5);
        nHLeft = Math.floor(nDelta / 36e5);
        nDelta -= (nHLeft * 36e5);
        nMLeft = Math.floor(nDelta / 6e4);
        nDelta -= (nMLeft * 6e4);
        nSLeft = Math.floor(nDelta / 1e3);
        nDelta -= (nSLeft * 1e3);
        
        if (nHLeft < 10)
        { var hh = "0" + nHLeft; }
        else
        { var hh = nHLeft; }
        
        if (nMLeft < 10)
        { var mm = "0" + nMLeft; }
        else
        { var mm = nMLeft; }
        
        if (nSLeft < 10)
        { var ss = "0" + nSLeft; }
        else
        { var ss = nSLeft; }
        
        oThis.owner.innerHTML = "<span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>" + hh + "</span>  <span style='font-size:40px;'> : </span><span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>" + mm + "</span> <span style='font-size:40px;'> : </span><span style='padding:10px; background-color:silver; font-size:40px; border:1px black solid;'>" + ss + "</span>";
        
    }
};

Timer.instances = [];

Timer.session = setInterval(Timer.refreshAll, 1000);

function partenza(){for(var aTimers = document.getElementsByClassName("countdown"), oTimer, nLen = aTimers.length, nItem =0; nItem < nLen; nItem++){
        oTimer = aTimers[nItem];
        if(!oTimer.hasAttribute("data-fine")){continue;}
        newTimer(oTimer, oTimer.getAttribute("data-fine"));
    }
    Timer.refreshAll();
};
</script>

<script>
$(document).ready(function(){
$("#responsecontainer").load("p2.asp", function(){partenza()})
var refreshId = setInterval(function(){
$("#responsecontainer").load('p2.asp', function(){partenza()});},5000);
$.ajaxSetup({ cache:false});
});
</script>

</head>
<body>
<div id="responsecontainer"></div>
</body>
</html>

**cavicchiandrea** · 14-11-2013, 22:58

Prova a mettere la pagina online (tuosito.xxxx/pagina.xxxx)

**peppeweb** · 14-11-2013, 23:15

http://www.avvocatoveneramicciche.it...Principale.asp

http://www.avvocatoveneramicciche.it/PaginaProva.asp

**cavicchiandrea** · 15-11-2013, 17:09

Sembrerebbe non funzionare perché manca questa funzione newTimer(); vedi console firefox

codice:

ReferenceError: newTimer is not defined http://www.avvocatoveneramicciche.it/PaginaPrincipale.asp Line 66

ricontrolla che il countdown sia corretto

Discussione: refresh div in conflitto con un countdown

Strumenti discussione

Ricerca discussione

Visualizza

refresh div in conflitto con un countdown

Permessi di invio