PHP jQuery: Passing a PHP variable FROM (not to) $.load() - php

Question

I've seen questions asking about sending variables TO a document being loaded in $.load, but not retrieving variables from a $.load.
I've pasted the pertinent pieces of code below; essentially what I'm trying to do is run a PHP function every so often, and initially when the page first loads.
When the page first loads, it runs the getData function - and everything works as intended. But later down the page, when I try to load pullData.php, srcAverage doesn't update with the new value. The JS alert shows the srcAverage value.
Example: The first time the page is run, srcAverage is X. Every 5 seconds, we want to load pullData.php and update srcAverage on index.php with the new value (change X).
I feel like it's something really small I'm doing incorrectly - ideas?
conn.php
<?php
define("HOST", "stuff");
define("USER", "stuff");
define("PASSWORD", "stuff");
define("DATABASE", "stuff");
$mysqli = new mysqli(HOST, USER, PASSWORD, DATABASE);
// Connection info above all works as intended
?>
index.php
<?php
include 'inc/conn.php';
include 'inc/function.php';
$src = "none";
getData($src, $mysqli);
// This initial run of getData works as intended
// Skip to further down
// The JS alert below does NOT reflect the new srcAverage
?>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
// each interval, get first and second values
$("#targetDiv").load("pullData.php");
alert('New value is <?php echo $srcAverage; ?>');
}, 5000); // end setInterval
});
</script>
pullData.php
<?php
include 'incl/conn.php';
include 'incl/function.php';
$src = "none";
getData($src, $mysqli);
?>
The getData function (see code below) grabs 4 values from separate tables, averages them together (I have them all separated in different statements and variables for troubleshooting purposes), then sets the variable srcAverage to the average value. I've tested that the MySQLi statements are working fine, and srcAverage is assigned the correct value by the function. Echoing or JS alerting show the value as intended (on this page). But the variable does NOT get passed to index.php when loaded via load().
function.php
<?php
function getData($src, $mysqli) {
// Check SRC for specific source
// If no specific source, get average of all sources
// If YES specific source, get that value
global $srcAverage;
if ($src == 'alt') {
if ($stmt = $mysqli->prepare("SELECT value FROM table ORDER BY id DESC LIMIT 1;")) {
$stmt->execute(); // Execute the prepared query.
$stmt->store_result();
$stmt->bind_result($altVal); // get variables from result.
$stmt->fetch();
if($stmt->num_rows == 1) { // The entry exists, good to go
// echo $altVal;
}
} else {
// Either no results pulled or more than one.
echo "Error pulling alternate data!";
return false;
}
}
else {
// Value 1
if ($stmt = $mysqli->prepare("SELECT value FROM table ORDER BY id DESC LIMIT 1;")) {
$stmt->execute(); // Execute the prepared query.
$stmt->store_result();
$stmt->bind_result($firstVal); // get variables from result.
$stmt->fetch();
if($stmt->num_rows == 1) {
// echo $firstVal; // This works as intended
}
} else {
// Either no results pulled or more than one.
echo "Error pulling first value data!";
return false;
}
// Value 2
if ($stmt = $mysqli->prepare("SELECT value FROM table ORDER BY id DESC LIMIT 1;")) {
$stmt->execute(); // Execute the prepared query.
$stmt->store_result();
$stmt->bind_result($secondVal); // get variables from result.
$stmt->fetch();
if($stmt->num_rows == 1) { // The entry exists, good to go
// echo $secondVal;
}
} else {
// Either no results pulled or more than one.
echo "Error pulling second value data!";
return false;
}
// Value 3
if ($stmt = $mysqli->prepare("SELECT value FROM table ORDER BY id DESC LIMIT 1;")) {
$stmt->execute(); // Execute the prepared query.
$stmt->store_result();
$stmt->bind_result($thirdVal); // get variables from result.
$stmt->fetch();
if($stmt->num_rows == 1) { // The entry exists, good to go
// echo $thirdVal;
}
} else {
// Either no results pulled or more than one.
echo "Error pulling third value data!";
return false;
}
// Value 4
if ($stmt = $mysqli->prepare("SELECT value FROM table ORDER BY id DESC LIMIT 1;")) {
$stmt->execute(); // Execute the prepared query.
$stmt->store_result();
$stmt->bind_result($fourthVal); // get variables from result.
$stmt->fetch();
if($stmt->num_rows == 1) { // The entry exists, good to go
// echo $fourthVal;
}
} else {
// Either no results pulled or more than one.
echo "Error pulling fourth value data!";
return false;
}
// So everything up to this point is working fine. Statements grab data as intended, and assign variables.
// We have data - move forward
$srcCount = 4;
$srcTotal = $firstVal + $secondVal + $thirdVal + $fourthVal;
$srcAverage = $srcTotal / $srcCount;
$srcAverage = number_format((float)$srcAverage, 2, '.', '');
// echo "Total: $srcTotal .... Average: $srcAverage";
// If we were to echo above, it would display correctly. Problem is passing the variable to index
return $srcAverage;
}
}
?>

Answer 1

You're misunderstanding the php page lifecycle. <?php echo $srcAverage; ?> is evaluated only once when the page is initially loaded/rendered.
If you want to get the new value, you should probably switch over to using $.ajax() instead of .load(), and have pullData.php echo the result as json so you can work with the response in javascript.

Answer 2

Your problem is you are echoing out $srcAverage through php. The browser doesn't get php from the server or know how to execute it, it only sees the result of the php script. So, if you view source you will see that all your alert is is:
alert('New value is ');
The php already ran, $srcAverage when it was echoed was undefined due to scope so it put a null which converts to an empty string.
What gets loaded by $.load is the result of pullData.php, already parsed by php and returned through the server. pullData.php has no output. You need to echo the result of getData so that the javascript can see it.
What you need to be doing in javascript is:
alert('New value is ' + $('#targetDiv').html());
Based on your example markup you also seem to be missing #targetDiv. You probably want to wrap your original getData in #targetDiv.
So, your fixed version looks like this:
index.php
<div id='targetDiv'>
<?php
include 'inc/conn.php';
include 'inc/function.php';
$src = "none";
echo getData($src, $mysqli);
// This initial run of getData works as intended
// Skip to further down
// The JS alert below does NOT reflect the new srcAverage
?>
</div>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
// each interval, get first and second values
$("#targetDiv").load("pullData.php");
alert('New value is ' + $('#targetDiv').html();
}, 5000); // end setInterval
});
</script>
pullData.php
<?php
include 'incl/conn.php';
include 'incl/function.php';
$src = "none";
echo getData($src, $mysqli);
?>

Answer 3

Pass it as a new argument
$("#element").load("file.php", { 'myVar' : 'someValue'} );
Then on the server:
$_POST['myVar'];
will contain the value.
Edit
Maybe I mis understood, if you want to access data from the load function, you need to use the callback.
$('#element').load('file.php', function(data){
//response from the server
});