Creating JavaScript variable within PHP retrieving in JavaScript

Question

Basically what I have is, there is an index file, that links to a JS file, which then pulls in a PHP file.

So in the PHP file I have (along with other code) :

echo " <script type='text/javascript'>var paging = [ ";
echo "{";
echo "numrows:'" . number_format($numrows) . "',";
echo "pagenum:'" . number_format($pagenum) . "',";
echo "maxpage:'" . number_format($maxpage) . "',";
echo "record_min:'" . number_format($record_min) . "',";
echo "record_max:'" . number_format($record_max) . "'";
echo "}];</script>";

Then, in a JS file I use ajax:

req.open("GET", "server.php", true);

and within the readystatechange I need to retrieve that paging variable you see from the php file because it contains data from the database.

In the JS file I have tried using a variable instead of echo

var m=<?PHP echo $paging; ?>

but that doesn't work either.

Any suggestions or ideas how to get this to work?

Answer 1

I'd use JSON instead of JS. You should be able to pass a PHP array to the json_encode function. See: http://php.net/manual/en/function.json-encode.php

Also, on the PHP side, you may want to modify your response headers to indicate that the response message body is JSON:

header( 'Content-Type: application/json' );

Then, use jQuery to get the JSON from the server: http://api.jquery.com/jQuery.getJSON/

Answer 2

Another possible solution for you if you don't get direct JSON working (scaled down to two variables)

echo '<div id = "numrows">'. number_format($numrows) . '</div>';
echo '<div id = "pagenum">'. number_format($pagenum) . '</div>';

in the php file

req.onreadystatechange = function(){
    if (req.readyState == 4 && req.status == 200){
        document.getElementById('return').innerHTML = req.responseText;
    }
}
req.open("GET", "server.php", true);
req.send();
n["numrows"] = document.getElementById("numrows").innerHTML;
e = document.getElementByID("numrows");
e.parentNode.removeChild(e);
n["pagenum"] = document.getElementById("pagenum").innerHTML;
e = document.getElementByID("pagenum");
e.parentNode.removeChild(e);

in the javascript

<div id = "return" style="display: none;"></div>

in the html

Not the most elegant solution, but fairly straightforward to follow if you can't get anything else working.

Answer 3

Ok because jQuery makes this easy, here is my example:

$paging = array(
                "numrows" => number_format($numrows),
                "pagenum" => number_format($pagenum),
                "maxpage" => number_format($maxpage),
                "record_min" => number_format($record_min),
                "record_max" => number_format($record_max)
               );

$output = json_encode($paging);

header( 'Content-Type: application/json' );

echo $output;

Then in your javascript page using jquery do this:

function myCallBackFunction(data){
    alert(data.numrows);
}
$.getJSON('server.php',myCallBackFunction(data));

Hope this helps.

Edited to use array and json_encode