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 file stats_bar.php is:

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

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

        <script>

        // Stats Bar Script - Currently Not Working

        $(document).ready(function() {
            function loadlink() {
                $.get('ajax/stats_bar.php', '', function(res) {
                    res = $(res).filter('#stats_bar');
                    $('#stats_bar').replaceWith(res);
                });
            }
            loadlink();

            setInterval(function(){
                loadlink(); // this will run after every 1 second
            }, 1000);
        });

        </script>

<?php
    }
?>

and stats_bar.php contains the following code:

<div id="stats_bar">

    <script>
    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);
    }

    $(document).ready(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>
</div>

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?

UPDATE

The correct answer given by selfagency can be used to achieve the desired outcome by using GET and POST when the content is in a separate PHP file, however I was also able to use the information provided in the correct answer to produce the same effects using just the main page which meant no delay between loading the content – I have included the code below.

PLEASE NOTE, what has been achieved here may not be the best outcome overall as what I have found with both approaches is that because the page is constantly refreshing sections of PHP and therefore continually requesting data, the number of requests and overall bandwidth is astronomical, to the point where pages that already contained even a small number of PHP requests will quickly crash.

I will continue to look for a better solution!

<?php
                if(isset($_SESSION['uid'])){
                include("safe.php");
                include("cron_update_stats.php");
                    $currenttime = time();
                    $time = date('i:s', (10 * 60) - ($currenttime % (10 * 60)));
                    $bankgold_r = number_format($stats['bankgold']);
                    $bankfood_r = number_format($stats['bankfood']);
                    $gold_r = number_format($stats['gold']);
                    $food_r = number_format($stats['food']);
                    $worker_r = number_format($unit['worker']);
                    $farmer_r = number_format($unit['farmer']);
                    $warrior_r = number_format($unit['warrior']);
                    $defender_r = number_format($unit['defender']);
                    $thief_r = number_format($unit['thief']);
                    $sword_r = number_format($weapon['sword']);
                    $shield_r = number_format($weapon['shield']);
                    $turns_r = number_format($stats['turns']);
            ?>

            <script>
                setInterval("my_function();",1000); 
                function my_function(){
                    $('#refresh_countdown_clock').load(location.href + ' #countdown_clock');
                    $('#refresh_bankgold').load(location.href + ' #bankgold');
                    $('#refresh_bankgold_m').load(location.href + ' #bankgold_m');
                    $('#refresh_bankfood').load(location.href + ' #bankfood');
                    $('#refresh_bankfood_m').load(location.href + ' #bankfood_m');
                    $('#refresh_gold').load(location.href + ' #gold');
                    $('#refresh_gold_m').load(location.href + ' #gold_m');
                    $('#refresh_food').load(location.href + ' #food');
                    $('#refresh_food_m').load(location.href + ' #food_m');
                    $('#refresh_worker').load(location.href + ' #worker');
                    $('#refresh_worker_m').load(location.href + ' #worker_m');
                    $('#refresh_farmer').load(location.href + ' #farmer');
                    $('#refresh_farmer_m').load(location.href + ' #farmer_m');
                    $('#refresh_warrior').load(location.href + ' #warrior');
                    $('#refresh_warrior_m').load(location.href + ' #warrior_m');
                    $('#refresh_defender').load(location.href + ' #defender');
                    $('#refresh_defender_m').load(location.href + ' #defender_m');
                    $('#refresh_thief').load(location.href + ' #thief');
                    $('#refresh_thief_m').load(location.href + ' #thief_m');
                    $('#refresh_sword').load(location.href + ' #sword');
                    $('#refresh_sword_m').load(location.href + ' #sword_m');
                    $('#refresh_shield').load(location.href + ' #shield');
                    $('#refresh_shield_m').load(location.href + ' #shield_m');
                    $('#refresh_turns').load(location.href + ' #turns');
                    $('#refresh_turns_m').load(location.href + ' #turns_m');
                }
            </script>

     <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> <span id="refresh_turns_m"><span id="turns_m"><?php echo $turns_r; ?> <?php if($stats['turns'] < 250){ echo "<small class='text-warning'>(+5 turns in ".$time.")</small>"; }else{ echo "<small class='text-danger'>(Max. turns)</small>"; }?></span></span></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">BANK &raquo;</b> Gold: <span id="refresh_bankgold_m"><span id="bankgold_m"><?php echo $bankgold_r; ?></span></span> ⋅ Food: <span id="refresh_bankfood_m"><span id="bankfood_m"><?php echo $bankfood_r; ?></span></span></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">RESOURCES &raquo;</b> Gold: <span id="refresh_gold_m"><span id="gold_m"><?php echo $gold_r; ?></span></span> ⋅ Food: <span id="refresh_food_m"><span id="food_m"><?php echo $food_r; ?></span></span></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">INCOME &raquo;</b> Workers: <span id="refresh_worker_m"><span id="worker_m"><?php echo $worker_r; ?></span></span> ⋅ Farmers: <span id="refresh_farmer_m"><span id="farmer_m"><?php echo $farmer_r; ?></span></span></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">BATTLE &raquo;</b> Warriors: <span id="refresh_warrior_m"><span id="warrior_m"><?php echo $warrior_r; ?></span></span> ⋅ Defenders: <span id="refresh_defender_m"><span id="defender_m"><?php echo $defender_r; ?></span></span> ⋅ Thieves: <span id="refresh_thief_m"><span id="thief_m"><?php echo $thief_r; ?></span></span></div>
            <div class="pl-md-3 pr-md-3"><b class="text-primary">WEAPONS &raquo;</b> Swords: <span id="refresh_sword_m"><span id="sword_m"><?php echo $sword_r; ?></span></span> ⋅ Shields: <span id="refresh_shield_m"><span id="shield_m"><?php echo $shield_r; ?></span></span></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> <span id="refresh_turns"><span id="turns"><?php echo $turns_r; ?> <?php if($stats['turns'] < 250){ echo "<small class='text-warning'>(+5 turns in ".$time.")</small>"; }else{ echo "<small class='text-danger'>(Max. turns)</small>"; }?></span></span></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: <span id="refresh_bankgold"><span id="bankgold"><?php echo $bankgold_r; ?></span></span> ⋅ Food: <span id="refresh_bankfood"><span id="bankfood"><?php echo $bankfood_r; ?></span></span></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: <span id="refresh_gold"><span id="gold"><?php echo $gold_r; ?></span></span> ⋅ Food: <span id="refresh_food"><span id="food"><?php echo $food_r; ?></span></span></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: <span id="refresh_worker"><span id="worker"><?php echo $worker_r; ?></span></span> ⋅ Farmers: <span id="refresh_farmer"><span id="farmer"><?php echo $farmer_r; ?></span></span></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: <span id="refresh_warrior"><span id="warrior"><?php echo $warrior_r; ?></span></span> ⋅ Defenders: <span id="refresh_defender"><span id="defender"><?php echo $defender_r; ?></span></span> ⋅ Thieves: <span id="refresh_thief"><span id="thief"><?php echo $thief_r; ?></span></span></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: <span id="refresh_sword"><span id="sword"><?php echo $sword_r; ?></span></span> ⋅ Shields: <span id="refresh_shield"><span id="shield"><?php echo $shield_r; ?></span></span></div>
            </div>
            </div>
        </div>
        </div>

     </header>

Answer

The jQuery load method will not execute JavaScript contained in an HTML fragment. Try using the get method instead and using the callback to append the fragment to your page.

Try:

// main.php

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

<script>
  $(document).ready(function() {
    function loadlink() {
        $.get('ajax/stats_bar.php', function(res) {
            res = $(res).filter('#stats_bar');
            $('#stats_bar').replaceWith(res);
        });
    }
    loadlink();
  });
</script>

// statsbar.php

<div id="stats_bar">
  <h1>Test</h1>
  <script>
    console.log('it works!');
  </script>
</div>

Notice the change from:

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

to <script>.

You need to put <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> in your document <head> and just use <script> at the beginning of a code block.

You also seem to have some errors with your JavaScript in the PHP file you’re loading. Replace this:

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

with just <script>.

Then at the bottom, change:

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

to:

$(document).ready(function() {
  var tenMinutes = 60 * 10,
    display = document.querySelector('#time');
  startTimer(tenMinutes, display);
});

POST method example:

    function loadlink() {
        const data = {
          stats: {
            [...]
          }
        }

        $.post('ajax/stats_bar.php', data, function(res) {
            res = $(res).filter('#stats_bar');
            $('#stats_bar').replaceWith(res);
        });
    }