jQuery code doesn't work but also doesn't show any errors
Lionheart Nerd
I have some jQuery code that calls into a separate PHP file (which also contains a jQuery countdown clock), and although no errors are displayed, no jQuery code seems to be loaded.
The code I use to call the stats_bar.php file 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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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');jQuery instead of the jQuery code to call the PHP file, everything works as expected, but the jQuery countdown clock in the PHP file behaves the same way as the jQuery code used to call the PHP file, but I also checked that the countdown clock code is not There's an error, and it doesn't show any errors either, so I'm confused now?
Is there something I'm missing here?
renew
When the content is in a separate PHP file, the desired result can be achieved by using the correct answer provided by selfagency by using GET and POST, but I was also able to use the information provided in the correct answer, using just that method yields the same Effect. home page, which means there is no delay between loading content - I have included the code below.
Note that the results achieved here may not be the best overall, as I found in both approaches that the number of requests and total bandwidth is astronomical as the page keeps refreshing various parts of PHP, constantly requesting data numbers , to the point where pages that already contain a small number of PHP requests crash quickly.
I will keep looking for better solutions!
<?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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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 »</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>
self-agent
The jQuery loadmethod will not execute the JavaScript contained in the HTML fragment. Try using getthe method instead, and use a callback to add the fragment to the 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>
Please note the following changes:
<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 in <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">the document and use <head>it only <script>at the beginning of the code block .
There also seems to be some bug in the JavaScript in the PHP file you are loading. Replace with:
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
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);
});
Example of POST method:
function loadlink() {
const data = {
stats: {
[...]
}
}
$.post('ajax/stats_bar.php', data, function(res) {
res = $(res).filter('#stats_bar');
$('#stats_bar').replaceWith(res);
});
}