Time and date disappear after reload several times

Question

Javascript/jQuery/jQuery Mobile

The codes below work fine but when I reload/F5 several times of this page, the currentDate and currentTime values are disappear. Then when I reload several times again, its work fine. Does anyone know what is the cause and how to solve it?

 <%@ include file="/common/taglibs.jsp"%>
<%@ include file="/common/jquery-mobile-javascript-css.jspf"%>
<%@ include file="/common/jquery-mobile-javascript.jspf"%>
<!DOCTYPE html> 

     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script type="text/javascript">
            <script type="text/javascript">
                jQuery.noConflict();
                jQuery(document).ready(function() { 
                    function DisplayTime(){
                        if (!document.all && !document.getElementById)
                            return
                        var timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2;
                        var CurrentDate=new Date();
                        var hours=CurrentDate.getHours();
                        var minutes=CurrentDate.getMinutes();
                        var seconds=CurrentDate.getSeconds();
                        var year=CurrentDate.getYear();

                        if (hours<=9) {
                            hours="0"+hours;
                        }

                        if (minutes<=9) {
                            minutes="0"+minutes;
                        }

                        if (seconds<=9) {
                            seconds="0"+seconds;
                        }

                        if(year < 1000){
                            year += 1900;
                        }

                        var currentTime=hours+":"+minutes+":"+seconds;
                        var currentDate=dayNames[CurrentDate.getDay()]+' '+monthNames[CurrentDate.getMonth()]+' '+CurrentDate.getDate()+', '+year;
                        document.getElementById('curDate').innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentDate+" </b>";
                        timeElement.innerHTML="<font style='font-size:18px;font-weight:bold;'>"+currentTime+"</b>";
                        setTimeout(DisplayTime,1000);
                    }
                    window.onload=DisplayTime;
            </script>
        </head>

Html

    <body>
        <div id="page" data-role="page">
    <div data-role="header" data-theme="b" data-position="fixed">
        <p  class="ui-li-aside"><span id=curDate></span><span id=curTime></span></p>
    </div>
    </div>       
</body>

´jQuery(document).ready(function() {´ is redundant with ´window.onload=DisplayTime;´ — Edorka, Jun 25 '13 at 08:05
Dont use `.ready` with jQuery Mobile. http://stackoverflow.com/a/14469041/1771795 — Omar, Jun 25 '13 at 08:08
@Omar not sure if it's the cause, it seems that it could be an interlock problem — Edorka, Jun 25 '13 at 08:09
@Edorka jQuery Mobile works in a different way than jQuery. Pls take a look at the link i've posted. — Omar, Jun 25 '13 at 08:11
Indeed, this seems to be the cause, i'm going to delete my answer, could lead to misunderstanding. — Edorka, Jun 25 '13 at 08:13
did u just make changes on ready() with pageshow and using append rite? — gjman2, Jun 25 '13 at 08:30
yea, `.ready` shouldn't be used. use `pageshow` or other jQuery Mobile events. `pageinit` will fire once, so use `pageshow` or `pagebeforeshow`. — Omar, Jun 25 '13 at 08:32
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32322/discussion-between-omar-and-gjman2) — Omar, Jun 25 '13 at 08:44

score 0 · Accepted Answer · answered Jun 25 '13 at 09:59

Finally, i have replaced window.onload=DisplayTime; with using flag eg:

if(flag==true){
                DisplayTime();
                flag=false;
            }

I think window.onload is response earlier before the Displaytime fully loaded and that is why it wont display on the page after reload/refresh page several times

Time and date disappear after reload several times

Javascript/jQuery/jQuery Mobile

Html

1 Answers1