jquery viewport info not passed to php - php

Question

I'm trying and failing to send the viewport width and heigth to a PHP file!
I know this or rather many similar questions about passing to PHP have already been asked and I've been going through these as well. However, I haven't figured out why it doesn't work for me...
I get the following output, where the second line would match the first, if the data had been passed:
Your viewport width is 1519x766
Width is: 880 and Height is 495
I just can't get the information passed to the PHP part - tried it like this in one file and also in two files, where I then call the php file using:
<?php include 'panzoom.php';?>
I use this code in the head:
<script>
var viewportwidth;
var viewportheight;
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
$(document).ready(function() {
$.ajax({
url: 'http://localhost/index.php',
type: 'POST',
dataType: 'json',
data: {
width : viewportwidth,
height : viewportheight
}
});
});
</script>
<?php
$GLOBALS['directory'] = "photos/frontpage/";
if(isset($_POST['width']) && isset($_POST['height'])) {
$GLOBALS['width'] = $_POST['width'];
$GLOBALS['height'] = $_POST['height'];
}else{
$GLOBALS['width'] = 880;
$GLOBALS['height'] = 495;
}
$width = $GLOBALS['width'];
$height = $GLOBALS['height'];
echo '<p>Width is: ' . $width . ' and Height is ' . $height . '</p>';
?>

Answer 1

You have posted a JSON string to the PHP script and it is called data so you should be looking for $_POST['data']
Also as it is posted as a json string, in order to make sense of it in PHP you normally decode it to either an array or a string using json_decode()
You also dont need to create all the variables in javascript to clutter up the global namespace.
So try this
<script type="text/javascript">
document.write('<p>Your viewport width is '+
window.innerWidth+'x'+window.innerHeight+'</p>');
$(document).ready(function() {
$.ajax({
url: 'index.php',
type: 'POST',
dataType: 'json',
data: {
width : window.innerWidth,
height : window.innerHeight
}
});
});
</script>
<?php
$GLOBALS['directory'] = "photos/frontpage/";
if( isset($_POST['data']) ) {
$obj = json_decode($_POST['data']);
$GLOBALS['width'] = $obj->width;
$GLOBALS['height'] = $obj->height;
}else{
$GLOBALS['width'] = 880;
$GLOBALS['height'] = 495;
}
$width = $GLOBALS['width'];
$height = $GLOBALS['height'];
echo '<p>Width is: ' . $width . ' and Height is ' . $height . '</p>';
?>