Categories
Development jQuery

jQuery code isn’t working but also shows no errors

I have some jQuery code used to call a separate PHP file (which also contains a jQuery countdown clock) and none of the jQuery sections of code seem to load, despite there being no errors showing at all.

The code I am using to call the PHP file is:

<div id="stats_bar"></div>

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

            // Stats Bar Script - Currently Not Working

            function loadlink() {
                $.get('ajax/stats_bar.php', function(res) {
                    console.log('res: ' + res);
                    console.log('unwrapped: ' + res.unwrap());
                $(res).unwrap().appendTo('#stats_bar');
                });
            }

            loadlink();

                $('#stats_bar').loadlink(); // This will run on page load
            setInterval(function(){
                $('#stats_bar').loadlink(); // this will run after every 1 second
            }, 1000);
            console.log($(res).unwrap())

            </script>

and the PHP file contains the following code:

<?php
                    if(isset($_SESSION['uid'])){
                    include("safe.php");
                    include("cron_update_stats.php");

?>
        <script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
            function startTimer(duration, display) {
                var start = Date.now(),
                diff,
                minutes,
                seconds;
            function timer() {
            // get the number of seconds that have elapsed since 
            // startTimer() was called
                diff = duration - (((Date.now() - start) / 1000) || 0);

            // does the same job as parseInt truncates the float
                minutes = (diff / 60) || 0;
                seconds = (diff % 60) || 0;

                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                display.textContent = minutes + ":" + seconds; 

                if (diff <= 0) {
                // add one second so that the count down starts at the full duration
                // example 10:00 not 09:59
                    start = Date.now() + 1000;
                }
            }
            // we don't want to wait a full second before the timer starts
            timer();
            setInterval(timer, 1000);
            }

            window.onload = function () {
            var tenMinutes = 60 * 10,
                display = document.querySelector('#time');
                startTimer(tenMinutes, display);
            };
        </script>

        <?php $clock = "<span id=\"time\"></span>"; ?>

    <header class="sticky-top">     

        <div class="d-lg-none d-xl-none">
        <div class="container-flex pt-2 pb-2" style="background-color: #191919">
            <div class="container"> 
            <div class="justify-content-left text-light d-flex flex-column">
            <div class="pl-md-3 pr-md-3"><b class="text-primary">TURNS &raquo;</b> <?php echo number_format($stats['turns']); ?> <?php if($stats['turns'] < 250){ echo "<small class='text-warning'>(+5 turns in $clock)</small>"; }else{ echo "<small class='text-danger'>(Max. turns)</small>"; }?></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">BANK &raquo;</b> Gold: <?php echo number_format($stats['bankgold']); ?> ⋅ Food: <?php echo number_format($stats['bankfood']); ?></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">RESOURCES &raquo;</b> Gold: <?php echo number_format($stats['gold']); ?> ⋅ Food: <?php echo number_format($stats['food']); ?></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">INCOME &raquo;</b> Workers: <?php echo number_format($unit['worker']); ?> ⋅ Farmers: <?php echo number_format($unit['farmer']); ?></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">BATTLE &raquo;</b> Warriors: <?php echo number_format($unit['warrior']); ?> ⋅ Defenders: <?php echo number_format($unit['defender']); ?> ⋅ Thieves: <?php echo number_format($unit['thief']); ?></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">WEAPONS &raquo;</b> Swords: <?php echo number_format($weapon['sword']); ?> ⋅ Shields: <?php echo number_format($weapon['shield']); ?></div>
            </div>
            </div>
        </div>
        </div>

        <div class="d-none d-lg-block">
        <div class="container-flex pt-3 pb-3" style="background-color: #191919">
            <div class="container"> 
            <div class="d-flex flex-wrap justify-content-left text-light">
            <div class="pl-2 pl-md-3 pr-2 pr-md-3 pt-1 pb-1"><b class="text-primary">TURNS &raquo;</b> <?php echo number_format($stats['turns']); ?> <?php if($stats['turns'] < 250){ echo "<small class='text-warning'>(+5 turns in $clock)</small>"; }else{ echo "<small class='text-danger'>(Max. turns)</small>"; }?></div>
            <div class="pl-2 pl-md-3 pr-2 pr-md-3 pt-1 pb-1"><b class="text-primary">BANK &raquo;</b> Gold: <?php echo number_format($stats['bankgold']); ?> ⋅ Food: <?php echo number_format($stats['bankfood']); ?></div>
            <div class="pl-2 pl-md-3 pr-2 pr-md-3 pt-1 pb-1"><b class="text-primary">RESOURCES &raquo;</b> Gold: <?php echo number_format($stats['gold']); ?> ⋅ Food: <?php echo number_format($stats['food']); ?></div>
            <div class="pl-2 pl-md-3 pr-2 pr-md-3 pt-1 pb-1"><b class="text-primary">INCOME UNITS &raquo;</b> Workers: <?php echo number_format($unit['worker']); ?> ⋅ Farmers: <?php echo number_format($unit['farmer']); ?></div>
            <div class="pl-2 pl-md-3 pr-2 pr-md-3 pt-1 pb-1"><b class="text-primary">BATTLE UNITS &raquo;</b> Warriors: <?php echo number_format($unit['warrior']); ?> ⋅ Defenders: <?php echo number_format($unit['defender']); ?> ⋅ Thieves: <?php echo number_format($unit['thief']); ?></div>
            <div class="pl-2 pl-md-3 pr-2 pr-md-3 pt-1 pb-1"><b class="text-primary">WEAPONS &raquo;</b> Swords: <?php echo number_format($weapon['sword']); ?> ⋅ Shields: <?php echo number_format($weapon['shield']); ?></div>
            </div>
            </div>
        </div>
        </div>

    </header>

        <?php
                    }
        ?>

When using include('ajax/stats_bar.php'); instead of the jQuery code to call the PHP file, it all works exactly as expected, with the exception of the jQuery countdown clock within the PHP file which is behaving in the same way as the jQuery code used to call the PHP file, however I have also checked the countdown clock code for errors and it also doesn’t show any so I am now stumped?

Is there something I am missing here or have overlooked?

Leave a Reply

Your email address will not be published. Required fields are marked *