CODEWITHSUNDEEP
phpjavascriptjqueryajax
Andrew
Andrew

Reputation: 1167

display browser window width using PHP

I would like my PHP script to be able to access the width of the browser window. I've been reading up on this, and PHP can't access this information itself, but Javascript/jQuery can, and can then pass it to the server using AJAX, so PHP can get at it.

Following a few solutions online I've written the following test file, and called it "test.php"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
</head>

<?php
if (!isset($_POST["window_width"])) {
?>

<script type="text/javascript">
    var window_width = $(window).width();
    $.ajax({
        type: "POST",
        data: "window_width="+window_width,
    });
</script>   

<?php
}

if(!isset($_POST["window_width"])) {
    echo "not set";
}

?>
</html>

Loading test.php displays "not set" which shows that the window_width variable is not being picked up by PHP. This seems weird to me, because Firebug shows that the variable is there (set at 1366 on my computer, as this is the width of my browser).

How can I ensure that $_POST["window_width"] is set so that I can access it using PHP?

Upvotes: 2

Views: 5399

Answers (4)

Dale
Dale

Reputation: 10469

I don't think you need to use ajax in this case, the 'outer' (?) page needs to receive the data, not the 'inner' ajax request.

<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
</head>

<?php
if (!isset($_POST["window_width"]) && !isset($_SESSION['window_width'])) {
?>
<body>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="window_width_form" style="display:none;">
<input name="window_width" id="window_width" value="" />
</form>
<script type="text/javascript">
    $(function(){
        $('#window_width').val($(window).width());
        $('#window_width_form').submit();
    });
</script>   
</body>
<?php
}
elseif (isset($_POST['window_width']) && !isset($_SESSION['window_width']))
{
    $_SESSION['window_width'] = $_POST['window_width'];
    exit(header("Location: {$_SERVER['PHP_SELF']}\r\n"));
}

if(!isset($_POST["window_width"]) && !isset($_SESSION['window_width'])) {
    echo "not set";
}

?>
</html>

Upvotes: 2

Quentin
Quentin

Reputation: 943480

Your server side code doesn't pause processing to wait for the JavaScript to run. You are dealing with two separate HTTP requests here.

  1. The browser requests the HTML document
  2. Since $_POST['window_width'] is not set for that request. PHP returns an HTML document that includes the script. Since $_POST['window_width'] is still not set for that request, it also echos not set.
  3. The browser receives the HTTP response and parses it. As part of this process, it runs the JavaScript.
  4. The JavaScript makes a POST request to … wherever jQuery sends requests to by default since you didn't include a URI (which a very quick test suggests is the current URI).
  5. For this request $_POST["window_width"] is set and included in the document returned to JavaScript.
  6. Since the JavaScript doesn't have a success handler (or any other code that runs when the HTTP request comes back) the browser doesn't do anything with that document.

Ajax is a shorthand way of saying "Talk to the webserver with JavaScript". It doesn't stop HTTP being a stateless Request-Response protocol.

You haven't stated your usecase for getting the window width (which can change after the page has loaded), so it is hard to suggest a good solution to whatever problem you have. (You appear to have asked an XY Problem).

The two common reasons for wanting to know the window width are:

  • Statistics — in which case you can just process the data in PHP and not worry about rendering it to the client
  • Changing the layout — which is usually better achieved with CSS media queries

Upvotes: 3

Selvaraj M A
Selvaraj M A

Reputation: 3136

Try

$.ajax({
        url : "your url goes here"
        type: "POST",
        data: {"window_width":window_width}
    });

Upvotes: 1

dknaack
dknaack

Reputation: 60468

Description

I dont understand whats you goal ist but it looks like you forgot to wait till the DOM is ready.

Sample

$(function() {
   var window_width = $(window).width();
   $.ajax({
       type: "POST",
       data: "window_width="+window_width,
   });
});

Upvotes: 3

Related Questions