Passing data from php to Jquery

Question

I have all my javascript/jquery code in a file and include it into my page. Without having apache process js files as php what would be the best way to pass data from php to

Answer 1

Instead of mis-using HTML for passing data (which has to be parsed) you should actually echo JavaScript code. For example, PHP could generate:

<script type="text/javascript">
  var data1 = "data1";
  var data1 = "data2";
</script>

As this is declared in a global scope of your page your script can actually access these variables.

The only thing you have to look out for are race conditions. Your script will have to execute after the data has been defined. However, with a standard jquery on-dom-ready callback that is not a problem.

Answer 2

HTML

<div id="pagedata" style="display:none;">
<? 
$master['data1'] = 'single';
$master['data2'] = array('2a', '2b');
echo json_encode($master); ?>
</div>

json_encode should be already in PHP 5.2. Otherwise look here http://www.json.org/

JS

var master = JSON.parse( $('pagedata').html() );
// master.data1; // single
// master.data2[0]; // 2a
// master.data2[1]; // 2b

To use JSON.parse you'll need json2.js from here https://github.com/douglascrockford/JSON-js.

Answer 3

Instead of getting data from the dive you can directly populate the javascript as:

var pagedata = '<?php echo $somevariable; ?>';
var break_data = pagedata.split('<>');

Answer 4

Best practice is likely as Matt mentions in the comment above: use JSON. If you're going to use jQuery, you can have a PHP script you call using either $.get() or $.getJSON(). You can find the manual for PHP JSON here: http://php.net/manual/en/book.json.php, and the API reference for the jQuery method $.getJSON() here: http://api.jquery.com/jQuery.getJSON/

HTH.

Answer 5

It's a good idea to have JS variables and objects with data, but another approach is to manage them through internal jQuery storage $.data()

The advantages are obvious for non-trivial UI:

• you can use DOM object as a namespace
• encapsulation of internal data
• logic and objects are "isolated"

JS

var pagedata = jQuery.data( document.body, '<? echo json_encode($var); ?>');
var break_data = JSON.parge(pagedata)

Answer 6

Why don't you just have php render javascript directly (as JSON), then you have it available to jQuery natively.

<script>

  var data =  {my: 'data', goes: 'here', <? echo render_more_of_my_data(); ?> };

</script>

Edit:

if you don't want to have inline js in your php page, and don't want apache to process js as php, then maybe you can src a php file which contains js.

<script src="my_php_file.php">

and inside that php file have js

var data = <? echo render_my_data(); ?>;

OR

just jQuery to call a php webservice using ajax jQuery.get("php_url.php"), and again in that php script you render some json.