MyBB Community Forums

Hello there,

so I am working on a forum for a friend, and he wanted a timer indicating (and of course updating live) the time left to a certain event. Since I didn't find any good plugins that fast I decided to just do it on my own. Created a new template, including it etc. and that stuff works fine, the timer is displayed correctly as long as it comes to html and css only.

But, since the timer is supposed to update itself I need javascript (or atleast I decided to use js, because I am not that familiar with the possibilitys of jQuery/AJAX and that stuff). I wrote a little script that should do the trick fair enough - but it's not working. In fact, it is not even loading, since the first line is a WIP debug alert just indicating if the script (in an external .js file in the "jscripts" directory of the forum) is loaded/readed or not. What am I doing wrong? I tried including the script as plain code in simple <script> </script> tags in the new timer template or the index template of my theme itself and even tried to include it in the "headerinclude" template where all the other jscripts are.

<script type="text/javascript" src="{$mybb->asset_url}/jscripts/timer.js"></script>

(It's the html line I added in the "headerinclude" template of my used theme.)

But even the alert event in the first line of the linked .js file isn't fired.
Am I missing anything?

Additional information
The template I added (with the old "directly in template" version of the script):

<script type="text/javascript">
    alert("test");
    <!--
    var targetTime = new Date(2016, 11, 1, 12, 0, 0);
    window.onload = {var interval = setInterval(updateTime, 1000);};
    
    function updateTime() {
        var thisTime = new Date();
        var remainingTime = targetTime - thisTime;
        
        var remainingDays = remainingTime.getDay();
        var remainingHours = remainingTime.getHour();
        var remainingMinutes = remainingTime.getMinutes();
        var remainingSeconds = remainingTime.getSeconds();
        
        document.getElementById('day').innerHTML = remainingDays;
        document.getElementById('hour').innerHTML = remainingHours;
        document.getElementById('minute').innerHTML = remainingMinutes;
        document.getElementById('second').innerHTML = remainingSeconds;
    }
    
    body.onunload = window.clearInterval(interval);
    // -->
</script>
<style>
    div.timer {
        min-width: 250px; max-width: 298px; min-height: 50px;
        padding: 5px;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        background-color: #F2F2F2;
    }
    div.showtime {
        height: 20px; min-width: 50px;
        padding-left: 2px; padding-right: 2px;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        background-color: #E8E8E8;
        color: black;
        float: left;
        margin-left: 3px; margin-right: 3px; margin-top: 10px;
    }
</style>
<center>
<div class="timer" id="timer">
    <span style="font-size: 18; color: black;"><b>Zeit bis zum Serverstart:</b></span><br>
    <div class="showtime"><span id="day">00</span> Tage</div>
    <div class="showtime"><span id="hour">00</span> Stunden</div>
    <div class="showtime"><span id="minute">00</span> Minuten</div>
    <div class="showtime"><span id="second">00</span> Sekunden</div>
    <br style="clear: both;">
</div>
</center>
<br /><br />

It's called via "{$timer}" in the index template right after the "{$header}", html/css working fine.

---

Content of the "timer.js" file:

alert("loaded");
if(document.getElementById('timer') !== undefined) {
    window.onload = {var interval = setInterval(updateTime, 1000);};
    
    body.onunload = window.clearInterval(interval);
    alert("Start-if success");
}

var targetTime = new Date(2016, 11, 1, 12, 0, 0);

function updateTime() {
    alert("function called");
    var thisTime = new Date();
    var remainingTime = targetTime - thisTime;
    
    var remainingDays = remainingTime.getDay();
    var remainingHours = remainingTime.getHour();
    var remainingMinutes = remainingTime.getMinutes();
    var remainingSeconds = remainingTime.getSeconds();
    
    document.getElementById('day').innerHTML = remainingDays;
    document.getElementById('hour').innerHTML = remainingHours;
    document.getElementById('minute').innerHTML = remainingMinutes;
    document.getElementById('second').innerHTML = remainingSeconds;
}

- Rainbow Fresh

Two weeks and still no reply?
Is this problem bigger than I thought or is simply no one willing to help...?

Have you checked the browser console to make sure the JS file is actually loaded by the browser? Firefox, Chrome and IE all have developer tools that show the requests being made and the JS that is loaded, simply right click anywhere on the page and select "Inspect Element" (or something to that effect). If the file's not being loaded, that's the first thing to investigate.

When going to the Debugger there is no external Javascript file in the list, the only thing there is, is the <script> tag at the specific position in the whole index.php (which, as far as I understood, is being put together from the loaded snippets in the actual index.php and then just being printed by the function at the very end of the file).

So no, the file is not being loaded (as far as I can tell from this). So my conclusion would be, since it's not working when writing the code directly into the <script> tag itself either, that there is something I need to add in the .php files, just like making a template includeable in plain html by using the eval function, that I am simply not aware of.

Is this a live forum? Can you provide the URL and details for a temporary admin account so I can take a look?

Well, since the forum belongs to my friend I have to ask for permission to give administrative power, but I think he will agree. I'll ask him and write you a PN if I got an answer.

Regarding the live thingy... Right now someone forgot to increase the duration of the webspace, so right now there is nothing... period xD

---

Update for all having the same problem:
For me it was solved by making sure the script is only executed once the site is fully loaded (e.g. with jQuerys ".ready()" function)