Develop Reference

In development, outputting troubleshooting code only works well for standard page loads, ajax presents issues

Summary: I have a solution I've built for monitoring variables and code processing in my environment. It works well for static pages, and the code below is a usable solution for that. However, if the page includes ajax calls which updates common variables after the page runs, this monitoring method isn't useful. To make it do so, I want to figure out a way to piggyback off an ajax call that will story information that's run in place, but I can't figure out how to work it into this code.
I have the following error checking file for php that I use in my development environment, the following using a magic function, register_tick_function, to store code as its run and show the variables for each step. Including it on a page allows the tick process to run...
<?php
register_tick_function(function(){
if (isset($GLOBALS["developer_debug"]) && $GLOBALS["developer_debug"] == 'active'){
$backtrace = debug_backtrace();
$line = $backtrace[0]['line'] - 1;
$file = $backtrace[0]['file'];
if ($file == __FILE__) return;
static $fp, $cur, $buf;
if (!isset($fp[$file])) {
$fp[$file] = fopen($file, 'r');
$cur[$file] = 0;
}
if (isset($buf[$file][$line])) {
$code = $buf[$file][$line];
} else {
do {
$code = fgets($fp[$file]);
$buf[$file][$cur[$file]] = $code;
} while (++$cur[$file] <= $line);
}
$line++;
if (defined('ERR_LOG')){ $error_log = ERR_LOG; } else {
$error_log = "../logs/error_log";
}
error_log("\n==========================================================\n", 3, $error_log);
error_log("\n $file : $line :: $code \n", 3, $error_log);
error_log("\n Variables: \n" . print_r(get_defined_vars(), true) . "\n", 3, $error_log);
$GLOBALS["_TROUBLESHOOTING"][] = "<code>\n $file : $line ::: ". htmlentities($code, ENT_QUOTES) . " \n</code>";
}
}, ["_SERVER" => $_SERVER, "_COOKIE"=>$_COOKIE, "_REQUEST"=>$_REQUEST, "_SESSION"=>$_SESSION, "_GLOBALS"=>$GLOBALS]);
// To use...
// declare(ticks=1);
// include_once('debug.php');
and in my direct page loads (such as index.php) I can include this js:
$(document).ready(function() {
var dev_top_button = document.createElement("Button");
dev_top_button.innerHTML = "Top Dev Data";
dev_top_button.style = "top:0;right:75%;position:absolute;z-index: 9999"
document.body.appendChild(dev_top_button);
var dev_bottom_button = document.createElement("Button");
dev_bottom_button.innerHTML = "Bottom Dev Data";
dev_bottom_button.style = "top:0;right:50%;position:absolute;z-index: 9999"
document.body.appendChild(dev_bottom_button);
$(dev_top_button).click(function(){
$("#debug_top").toggle();
});
$(dev_bottom_button).click(function(){
$("#debug_bottom").toggle();
});
});
and this on the page itself:
echo "<div class='debug_outer' id='debug_top'><h3>Developer Information</h3><div class='debug_inner'><pre>";
if (isset($GLOBALS['_TROUBLESHOOTING']) && is_array($GLOBALS['_TROUBLESHOOTING']) && ! empty($GLOBALS['_TROUBLESHOOTING'])) {
$troubleshooting_return_array = $GLOBALS['_TROUBLESHOOTING'];
} else {
$troubleshooting_return_array = ['Empty'];
}
echo print_r(["_COOKIE" => $_COOKIE, "_REQUEST" => $_REQUEST, "_SESSION" => $_SESSION, "_TROUBLESHOOTING" => $troubleshooting_return_array, "_SERVER" => $_SERVER, "_GLOBALS" => $GLOBALS], true);
echo '</pre></div></div>';
(And a similar output at the end of the page)
So, for most pages, this method to quickly check out page variables works great. And results in a nice javascript button to where I can quickly check what my start and end variables are on a page, along with a _TROUBLESHOOTING array I can easily dump whatever values I want to for quick looking over at page start and end.
So this system has been working pretty well for me for quite awhile now. The problem, however, comes with ajax calls. I've tried several different ways, but ajax calls generally want and expect data in a certain format. I'm -wanting- to make a third div for displaying data, along with a button for it, but I'm having a hard time figuring out how to piggyback any output data along with an ajax call, and it has to be called when the ajax is called in order to get how all the variables change and to track anything I'm troubleshooting. Sure, I can put an output to the error logs each time, but that's way slower on workflow and requires grepping through all the output since the last time the logs were cleared rather than simply seeing what my data is as I'm manipulating it.
Does anyone have a good idea to piggyback off of ajax calls to take use of these existing kinds of calls? Because messing with the returned values of the ajax calls will always result in bad data for the ajax call itself.

Solution was fairly straightforward after I thought about it for a while:
For ajax requests, send the data to a sub-array in session; a sub-array that's normally ignored by by the normal two print outs. Then, have a third button that's an ajax request that specifically fetches the value of that sub-array. The sub-array can be specifically filled with a sub-sub array for each ajax call that has been done, and then when fetched by the third button, it creates a div to share it and then empty the sub-array (otherwise it will bloat way too quickly), allow seeing all ajax calls since the last time the button was clicked (and appending them to the existing list, if still on the same page.)

How to make an Excel file an interactive webpage?

How can I make my Excel file work as a web page where people can enter data and it will stay there? I am new to this!

Required technologies for this exercise: JavaScript, JQuery, PHP, AJAX and MySQL. And Excel! All this requires a minor edit, only adding 3 lines of text to the generated html page.
A running demonstration is at https://ip.jawfin.net
I'd like to state that the html of Excel Save As has been badly maligned - Excel 2013 generates a very clean html, its styles are built into the comments (so only 1 file is produced, no CSS), it's well indented and easy to read. The only down-side is the names of classes of the styles are rather arbitrary! No JavaScript, just plain html - it's a nice place to start then refine in Notepad++ or your favourite editor. Mind you, the lack of CSS may come back to bite you, for extensive use I would recommend extracting the comments to build a CSS from.
Firstly, our Excel. Here's one I made, and this is for a simple application which puts your IP in the cell you select on the screen. (My practical use of this method was for a month scheduler, this "pick a colour" is good to demonstrate all the features and I hope will be easily adaptable.) One change though, I scramble the visitor's IP as a protection.
Here's my Excel file: https://ip.jawfin.net/ip.xlsx
We don't export the whole spreadsheet, just select the cells you want which will make up the webpage. In my case: -
With the cells selected, go into File / Save As, pick your folder, Save as Web Page (*.htm), choose only the Selection, give it a Title if desired, name it index.htm and Save!!
Now, rename index.htm to index.php as we will putting php code in it. Now for the 3 lines of code to make this an interactive webpage. Between the </body> and </html> at the bottom insert these 3 lines: -
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<?php include 'excel.php';?>
<script src="excel.js"></script>
so we have: -
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<?php include 'excel.php';?>
<script src="excel.js"></script>
</html>
The 1st line importing JQuery for our AJAX to work.
The 2nd is to get the user's IP. Note, this can do a lot more if required, for instance in my implementation I use it to log into a phpBB forum and get the logged-in username and permissions. This php also shows how we can pass server php variables to the local javascript.
The 3rd line is the brains, doing all the work and communicating with the server for updating and fetching data.
(You know, this really could just be one line of code if I embedded the script lines as echo's in the php - but that loses readability in my opinion.)
For the database: on your webserver log into your panel and create a new database for this app.
Then log into your phpMyAdmin to create the table[s] your application needs.
In this case it's one table, called cell_ip. Its structure: -
field:cell; type:integer; index:primary + unique
field:ip; type:text
Or as it appears in phpMyAdmin: -
The files this project uses are: -
index.php the one we just created in Excel, goes in the web folder
excel.php the file which fetches server-side variables (note we could also use this to inject dynamically created controls)
excel.js the script running local interface, also communicates with the server
server.php the database handler on the server, deals with the AJAX requests and database manipulations
settings.php just a means of storing the database configuration in a safe place
All these files go into the root of the web folder, except settings.php which goes in home, the folder above web, where the Internet cannot see it, but our server.php can.
Note the 4 php files are all doing completely different jobs:  index.php is the web page they see, the only user visible php file.  excel.php injects code into index.php, into the webpage, where it can get server-side settings for the client.  server.php is like a program running on the server alone, an application which our webpage calls to save and load data into our server-side database.  settings.php is just a glorified ini file, a quick means of storing sensitive info out of sight from the Internet.
All the source has relevant comments explaining the processes - but I'm willing to answer any questions I can, please note though that I am not an expert. So, without further ado, the work source codes.
(Edit: As I can't fit the full source here I'll provide links. Please let me know if there is a smarter/preferred way. As it is, I renamed these to .txt so it doesn't behave like a webpage!)
index.php - This too big to include, so download, or make it yourself from instructions above.
excel.php
<?php //excel.php
//Let's create a string specific to the user without giving away private info
$ip = $_SERVER['REMOTE_ADDR']; //I'm going with hashing the md5 of their IP, then mod'ing back to 12 digits (from 38)
$hash = fmod(hexdec(md5($ip)),1e12);
echo '<script>'; //clever means of getting a php variable into javascript
echo 'var user_ip = ' . json_encode($hash) . ';'; //replace $hash with $ip you want to see the real address!
echo '</script>';
?>
excel.js
//excel.js
$.ajaxSetup({ cache: false }); //needed to stop IE/Edge from caching AJAX GET requests
var cells = document.getElementsByTagName("td"); //array of all cells, excel assigns them type HTML table cell "td"
var updating = false; //prevent flicker if writing to the dataset and a read overwrites our status messages
var reentry = false; //prevent overlapping refresh. polls 1 a sec, 5 second time-out, could lead to massive overlap!
var addingStr = ' -- Adding IP --'; //const not used for backwards compatibility, IE9 etc.
var removeStr = ' -- Removing IP --';
var replaceStr = ' -- Replacing IP --';
for (var i = 0; i < cells.length; i++) { //you can assign different aspects by the .innerHTML
cells[i].style.cursor = 'cell'; //or 'pointer' - the default is the edit caret cursor which looks ugly
cells[i].id = i; //tag our elements, but note this is happening AFTER the DCOM scan so getElementById() won't work
cells[i].onclick = function() { cellClick(this); };
}
refreshScreen();
setInterval(function() { //ajax poll, refresh every second!
refreshScreen();
}, 1000);
function cellClick(cell) {
updating = true; //don't allow the refresh to remove our status comment in the cell
var mydata = 'action=';
if (cell.innerHTML == "" || cell.innerHTML == " ") {
cell.innerHTML = addingStr;
mydata += 'c'; //write into this cell the users IP
} else {
if (cell.innerHTML == user_ip) { //let's be smart and allow them to remove their own IP :)
cell.innerHTML = removeStr;
mydata += 'd'; //clear/delete this cell
} else { //it's someone else, hijack them!!
cell.innerHTML = replaceStr;
mydata += 'u'; //update this cell
}
}
mydata += '&cell=' + cell.id + '&ip=' + user_ip; //add our parameters
$.ajax({ //JQuery ajax, so much cleaner and safer than using JavaScript ajax
url: "server.php", //our server-side worker
type: 'POST', //database changes, use POST, we don't want a webcrawler or a cache hitting a GET with parameters
data: mydata,
timeout: 5000, //5 second should be ample, but if they lose connectivity allow it to fail
success:
function(data) {
updating = false;
if (data != 1) { //no matter what, in this CRUD only 1 record should have been affected
alert('Data update error. Parameters: ' + data + '. Result: ' + data);
}
refreshScreen(); //refresh screen with new data
},
error:
function(xhr, ajaxOptions, thrownError) { //put better error handling in if this fires too often!
// alert('Data = ' + mydata + '. Error # = ' + xhr.status + '. Message = '+thrownError); //uncommend to debug
updating = false;
refreshScreen();
}
});
}
function refreshScreen() {
if (updating) return; //just wait a second
if (reentry) return; //we're already pending a refresh
reentry = true;
var mydata = 'action=r'; //we want to Read the data - stored in a varible in case we turn on our error alert
$.ajax({
url: "server.php",
type: 'POST',
data: mydata,
timeout: 5000,
// dataType: 'json', //just saves us a line of formatting text on success. !!commented out, not debug friendly
success: function(data) { //on recieve of reply
reentry = false;
if (updating) return; //they clicked between the request and the return here, just wait it out, next second!
data = JSON.parse(data); //i prefer this instead of dataType:'json' so I check server script errors in the throw
var results = []; //get our data into a 2 dimensional array (has 2 dimensions as our query returned 2 fields
for(var x in data) { //get all the data ready before we touch the screen, cut down any possibly latency
results.push(data[x]);
}
for (var i = 0; i < cells.length; i++) { //reset screen
if (cells[i].innerHTML != removeStr) { //skipping the "Remove" messages (dirty read) - will clean up below if they were removed!
cells[i].innerHTML = ""; //clear field
}
}
for (var i = 0; i < results.length; i++) { //now we stuff our cells with the IPs we have
cells[results[i][0]].innerHTML = results[i][1]; //first array element is cell number, the second is the IP
}
//as the "Remove" status was skipped above need to loop again to clear any found
for (var i = 0; i < cells.length; i++) { //backwards clean
if (cells[i].innerHTML == removeStr) { //text is here as this cell didn't come through the SELECT
cells[i].innerHTML = ""; //clear field
}
}
},
error:
function(xhr, ajaxOptions, thrownError) { //uncomment alert for debugging
reentry = false;
// alert('Query = ' + mydata + '. Error # = ' + xhr.status + '. Message = '+thrownError);
//Note that xhr.status == 200 is an OK from the server but JSON invalid, so check for that first!
}
});
}
server.php
<?php //server.php
if (!isset($_POST['action'])) exit; //no action parameter, just leave. could echo an error message if required though
$action = $_POST['action'];
if (!strpos(' crud',$action)) { //note the space out front, or else it'll fail on 'c' as it returns zero, which = false
echo("Unknown action='$action'"); // took me ages to debug that, resulting in this line of code!!!!
exit; //otherwise not one of ours, quit before SQL stuff starts
}
require "../settings.php"; //lazy place to easily store settings out of reach from the Internet, parent of the web root.
//Be aware I used ".." - if this server.php is not in the webroot then the database.php is not out of reach.
//Note this method is easier than loading an .ini file and parsing it within an array.
if ($db_server == "") { //ASSERT: this should never fire as the require would fail on not find, but can't be too sure
echo "Problem getting database settings.";
exit;
}
$connection = mysql_connect($db_server, $db_username, $db_password); // Establishing Connection with Server
if (!$connection) {
echo "Error connecting to database.";
exit;
}
$db = mysql_select_db($db_database_ip, $connection); // Selecting Database
if (!$db) {
echo "Specific database not found.";
exit;
}
if ($action == 'c') { //note this will fail if there is a blank record against this cell, so check here
$cell = mysql_real_escape_string($_POST['cell']); //extract our parameter
$ip = mysql_real_escape_string($_POST['ip']);
if ($ip == "") {
echo "Cannot add blank IP in cell '$cell'";
} else {
$query = mysql_query("INSERT INTO cell_ip(cell, ip) values ('$cell', '$ip')"); //Create Query
echo $query; //always return the result, even if its unexpected. can hold error messages for debugging
}
}
if ($action == 'r') { //JSON our database back to the client.
//Note I am using the POST protol instead of GET, tidier on this server.php keeping all my server requests in one file
$result = mysql_query("SELECT cell, ip FROM cell_ip"); //Read Query
while ($row = mysql_fetch_row($result)) {
$table_data[] = $row;
}
echo json_encode($table_data); //return the whole dataset
}
if ($action == 'u') { //pinching someone else's cell with our ip, make sure the new ip exists too
$cell = mysql_real_escape_string($_POST['cell']);
$ip = mysql_real_escape_string($_POST['ip']);
if ($ip == "") {
echo "Cannot edit to a blank IP in cell '$cell'";
} else {
$query = mysql_query("UPDATE cell_ip SET ip = '$ip' WHERE cell = '$cell'"); //Update Query
echo $query;
}
}
if ($action == 'd') { //delete this cell
$cell = mysql_real_escape_string($_POST['cell']); //extract our parameter
$query = mysql_query("DELETE FROM cell_ip WHERE cell = '$cell'"); //Delete Query
echo $query;
}
mysql_close($connection); //Note this was never opened if the caller failed the "action" validation, being polite to our sql
?>
settings.php (this goes in root home, change the values in this to suit)
<?php //settings.php
$db_server='localhost';
$db_username='root';
$db_password='root_password';
$db_database_ip='excel_ip';
?>
Things to note: -
If your database relies on the cell number they may change if you edit your Excel and republish the html.
This demo relies on the cell numbers only because it is only a demo - for instance you could put text in the cells and use that to identify your relevant cells.
If you run your server on CloudFlare and change any of your .js or .php they get cached, so you need to purge those files on the CloudFlare (Caching) after you upload them.
SECURITY!!! Your JavaScripts will be available to the end user, they cannot not be, as JS runs on the client - not matter how packaged or encrypted they can be discovered. Do not have passwords or intellectual property in them. This also means your AJAX requests can be launched maliciously, be sure to put extensive handling and filtering in your server-side php's. I would also recommend employing a token + session handler to validate the calling client.
Final note: I wrote this for 2 reasons. First I wanted to read this in 10 years time so I can see how hacky and newby I am now (this is my second day as a web developer), and secondly I do not wish anyone to go through the shameful and humiliating experience which I did when asking for help on this project on StackOverflow (you won't find my question about that though, it got deleted). I hope this post is useful to somebody, I spent a whole day on designing it :)

How to make changes to HTML document permanent using Javascript?

I have a simple like counter code, but the changes made disappear
after the page is refreshed.
Why does this happen, should this be done using PHP ?
How can this code be written much more efficiently, just for the knowledge anyway this is not the main question.
var like=document.getElementById("like__image");
addEventListener("click",function(){
var likeBox=document.getElementById("like__box");
var likeAdd=Number(likeBox.textContent)+1;
likeBox.textContent=likeAdd;
});

According to my understanding, you need this count to be global and to be available to all the users who access your page. Javascript is a client side script and the only file you can create using this is a cookie. In this case, you can't use cookies as it is created separately for each user.
For persistent result use a database or if you are not using a database for your application/website you can use a file (like .txt or .xml) to save your count and next time you can read from that file to display it again. But generally using database is recommended over a file system.
Using file system:
For main file we have a small php code to get the existing like count and an ajax function requesting like.php file when a user clicks on the like button.
HTML body:
<?php
$likeFile = 'like.txt';
/* check if the like file exists*/
if(file_exists($likeFile)) {
/* read the only the first file of the file as we don't intend to have more */
$file = fopen($likeFile, 'r');
$like = fgets($file);
fclose($file);
if($like) {
/* if we get the line split the string "likes=number" and get the existing count */
$likeCount = end(explode('=', $like));
}
} else {
$likeCount = 0;
}
?>
Like <span id="count"><?php echo $likeCount ?></span>
Javascript:
<script type="text/javascript">
function like(){
$.ajax({
type:"POST",
data: {like:true},
url: "like.php",
success: function(result){
$('#count').text(result);
}
});
}
</script>
In the like.php, we are checking for the post variable "like" just to be sure that we don't simply increment the like on direct access to this file. Here we are checking if the like.txt file exists or not. If true, it gets the first line like=1, get the count, increment the count and return it back to the ajax request. If false, it simply creates the file like.txt with like=1 for the first and only time.
<?php
if(isset($_POST['like']) && $_POST['like'] == true)
{
$likeFile = 'like.txt';
/* check if the like file exists*/
if(file_exists($likeFile)) {
/* read the only the first file of the file as we don't intend to have more */
$file = fopen($likeFile, 'r');
$like = fgets($file);
fclose($file);
if($like) {
/* if we get the line split the string "likes=number" and get the existing count */
$likeCount = end(explode('=', $like));
$likeCount++; /* increment the count by one */
file_put_contents($likeFile, 'likes=' . $likeCount); /* write the new count the same file and save it */
echo $likeCount; /* return the like count to the ajax request */
}
} else {
/* if file does not exist create it for the first time with count 1 */
file_put_contents($likeFile, 'likes=1');
echo '1';
}
} else {
return 'Something Wrong!';
}
Hope this is clear enough and helpful for you.

I suggest looking to cookies if you want to keep track of information across page reloads in a simple way. If you want the information to be available to anybody other than the user who created it, you'll likely need some form of server-side persistence such as a database.

The javascript is reloaded when the page is reloaded, so it's natural that the changes are lost as well.
You can, however, store them permanently, either in a web service, or preferrably in localStorage. Then you can retrieve from localStorage on page load.
Using PHP probably wouldn't help without storing it somewhere.
I don't think your code could be written that much more efficient.

jQuery loading value from php file into html input on button click - not working

i have a text file with a number that is inside it. The number should be +1 inside the text file and the new value should be updated inside index.php all this should happen after a button inside index.php is clicked, but thats not happening.. i did a lot of googling and i tried many things from what i sow still it's not working, keeping in mind I'm new to jQuery. below is all the involved code explained. any help will be appreciated!
The php script inside index.php to retrieve the value from num.txt and place it inside the text input once index.php is loaded, this works perfectly:
<?php
$filename = "num.txt";
$file = fopen("num.txt","r+");
$number = fread($file, filesize($filename));
fclose($file);
?>
The text input code, as you can see will take the $number value from the above script and this works fine. keep in mind i used the id of the input and the class of it then i ended up adding a div and using its class, i didn't know what to do so i tested them all, same thing nothing worked:
<div class="on"><input type="text" id ="omlat" class="inv-number" value="<?php echo $number;?>"></input></div>
jQuery to update the value after clicking on the submit button. this function should only refresh the value of the input value by calling inum.php and taking the value inside inum.php after the code there is excited:
$(document).ready(function(){
$(".reloadpg").click(function(){
$(".on").load("http://localhost/einvoice/inum.php");
});
});
Code inside inum.php, this code works fine i tested it (this code takes the number inside num.txt and +1 the value as you can see):
<?php
header("Cache-Control: no-cache");
$filename = "num.txt";
$file = fopen("num.txt","r+");
$number = fread($file, filesize($filename));
$number = $number + 1; //the new number to proceed
file_put_contents('num.txt', $number);
echo $number;
fclose($file);
?>
-- Update --
The code bellow worked for the above part it worked perfectly but now I'm facing another problem. Another function that listens to the same button that was working before stopped working! so what i did was that i toke some of the code that the guys bellow provided and pot it inside the older function that was listening to the button click the whole code is as follows(please read the comments to understand the code):
$('.create-invoice').on('click',function()
{
//Below is the code i added from the first problem above its not working here.. when it was alone outside this function as the accepted answer it will work but it will stop this function from working!
$.get( "/einvoice/inum.php", function(data) {
$('.inv-number').val(data);
});
//Above is the code i added from the first problem..
//below is the original code for the function, keep in mind only the below code is bing excited the above is not.. its not refreshing the part of the page it should its calling the php script successfully tho, but i will have to refresh the page my self to see the number updated
grab_invoice_data();
// Declare a variable
var jsonObj = invoice_data;
// Lets convert our JSON object
var postData = JSON.stringify(jsonObj);
// Lets put our stringified json into a variable for posting
var postArray = {json:postData};
$.download("php/json.php", postArray, 'post');
//if cookie exists
var i_n = $('.inv-number').val();
$.cookie('lid', ++i_n, { expires: 365 } );
//invoices created
if( $.cookie('ic') ){
var ck_inv_created = ($.cookie('ic'));
$.cookie('ic', (++ck_inv_created));
} else {
$.cookie('ic', ++inv_created);
}
})

You're replacing the input with the number, rather than just updating its value. Try this instead...
$(document).ready(function(){
$(".reloadpg").click(function(){
$.get("http://localhost/einvoice/inum.php", function(data) {
$(".on input").val(data);
});
});
});
That uses jQuery's get() method to make an ajax call that passes the response into a callback function as a parameter. You can then do whatever you need with it inside that function.

You jquery part is not good. Try this :
$(document).ready(function(){
$(".reloadpg").click(function(){
$.get( "/einvoice/inum.php", function( data ) {
$("#omlat").val(data);
});
});
});

What is the most efficient and correct way of handling PHP array variables within JavaScript and being able it obtain those values using indexing

THE QUESTION
What is the most efficient and correct way of handling PHP array variables within JavaScript and being able it obtain those values using indexing.
I have a MYSQL database and have a PHP script that creates an indexed row array of the database information.
Now that this information is within the array i am comfortable about echoing this data on screen from within PHP.
i.e.
echo $lastplayed[1]['artist'];
My next step is to take the array into JavaScript so that i can use the variable information to display data on screen, make calculations and create an Ajax timer that looks for a value from a variable and refreshes the page..
Its basically a internet radio station that will display what is and has been played and when a counter reaches zero will refresh the page. (the counter being time left of a song)
I could echo each variable into a separate PHP script and then use JavaScript to call each of those PHP scripts that contain the different variables (This seems long-winded) AND puts unnecessary request strain on the MYSQL server
**I really feel that there must be a better way of transferring and handling the data, surely there must be some type of bridge between PHP and JavaScript, should i be looking into JSON ?
So my end result is to be able to take an indexed array from PHP, transfer this array into JavaScript and be able to call on different variables from within the array using indexing (i.e call the variable that resides in result 3 column 3)
And while this is happening i will be using separate PHP and JavaScript files...
Here is my code for the PHP part.
<?php
date_default_timezone_set('Europe/London');
require_once("DbConnect.php");
$sql = "SELECT `artist`, `title`, `label`, `albumyear`, `date_played`, `duration`,
`picture` FROM historylist ORDER BY `date_played` DESC LIMIT 5 ";
$result = $db->query($sql);
$lastplayed = array();
$i = 1;
while ($row=$result->fetch_object()) {
$lastplayed[$i]['artist'] = $row->artist;
$lastplayed[$i]['title'] = $row->title;
$lastplayed[$i]['label'] = $row->label;
$lastplayed[$i]['albumyear'] = $row->albumyear;
$lastplayed[$i]['date_played'] = $row->date_played;
$lastplayed[$i]['duration'] = $row->duration;
$lastplayed[$i]['picture'] = $row->picture;
$i++;
}
$starttime = strtotime($lastplayed[1]['date_played']);
$curtime = time();
$timeleft = $starttime+round($lastplayed[1]['duration']/1000)-$curtime;
$secsremain = (round($lastplayed[1]['duration'] / 1000)-($curtime-$starttime))
?>
Any thoughts on this would be greatly appreciated and thanks so much for your time.
Justin.
PROGRESS:
Thanks for the comments, i really need to take a JavaScript course at this point...
Now i have created a new output.PHP file that does the following
<?php
require_once("dblastplayedarray.php");
echo json_encode($lastplayed);
?>
So this file now echo's out the data i need in a JSON format from my array $lastplayed.
#VCNinc you say that i now can use the following code to take the data into JavaScript
<script>
var array = <?=json_encode($lastplayed)?>;
</script>
Please could you detail where i put the path information in this code so that the program knows where to look for the .PHP file output.php
Am i doing this right.. should i be printing the data into another .PHP file and then use your code to take the array into JavaScript..
Thanks
Justin.

JSON is the bridge!
You can "export" the variable to a json string and print on the output:
echo json_encode($lastplayed);
TIP: if the php file is used to show a html GUI AND you still want output a JSON too, you can create a GET variable like "&json=1" and, before output your HTML GUI, you do a IF. This way tou can use the same php file to output a GUI and the JSON. WHen you do the request via ajax, you call using the "&json=1".
if(isset($_GET['json']) && $_GET['json']==1){
echo json_encode($lastplayed);
exit;
}
Then, use AJAX to download this JSON string by calling your php script.
$.getJSON(url, function (json) {
//here the 'json' variable will be the array
//so you can interact on it if you want
$.each( json, function( key, value ) {
alert( key + ": " + value ); //here you can do anything you want
});
});

If you have a PHP array $array, you can easily export it into JavaScript like this:
<script>
var array = <?=json_encode($array)?>;
</script>
(and from that point you can manipulate it as JSON...)