Passing vars from jquery to php(page reload)

JavaScript
1

Hi there folks,

I need some help as I’m failing miserably by googling.

I am using some code I found to determine browser window size. I’m then trying to reload the page, passing the two vars of width and height via GET:

<?php

if(ISSET($_GET['w'])){
    /* Browser vars have been passed. */
    echo("<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
    <title>window size</title>
      
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
      
    Window size is: 
    
    Width: ".$_GET['w']."<br />
    Height: ".$_GET['h']."


      
    </body>


    </html>

    ");
}else{
    /* Use jquery to retrieve window size and refresh page. */

    echo("<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv='content-type' content='text/html; charset=UTF-8'>
      <title>window size</title>
      
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
      
    <script type='text/javascript'>//<![CDATA[ 


    // jQuery
    function jqUpdateSize(){
        // Get the dimensions of the viewport
        var width = $(window).width();
        var height = $(window).height();

        $('#jqWidth').html(width);
        $('#jqHeight').html(height);
    };
    $(document).ready(jqUpdateSize);    // When the page first loads
    $(window).resize(jqUpdateSize);     // When the browser changes size

    

    });//]]>  



    </script>


    </head>
    <body>
    
    <script type='text/javascript'>
    window.location.href = window.location.href+'?w='+width&h=+height;
    </script>
    
    You shouldn't be able to see this.

      
    </body>


    </html>");
}

?>

but it’s not working. I’ve tried with the window.location in the head, in the jquery function and in the body.

Could someone help me figure out how to make this happen?

Thanks for your time!

2

Hi schwim,

Your current code above won’t work as the redirect would execute before the jQuery code runs, instead it’s far easier to simply execute all your code within a document ready callback as then you know the page has finished loading and the script will execute in the order you’re expecting.

See the updated code below.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Window Size</title>
</head>
<body>

    <?php

    if (isset($_GET['w']) && isset($_GET['h'])) {
        ?>
        Window size is:<br><br>
        Width: <?php echo $_GET['w']; ?><br>
        Height: <?php echo $_GET['h']; ?>
        <?php
    } else {
        ?>
        <script src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
        <script>
            $(function() {
                window.location = window.location.href + '?w=' + $(window).width() + '&h=' + $(window).height();
            });
        </script>
        <?php
    }

    ?>

</body>
</html>
3

Thanks very much for your help, that worked much better than my attempt!

Is there a way to change it from GET to POST? I see jQuery.post in the documentation, but aren’t sure how to apply it to this code.

4

Hi,

Just out of interest, why are you trying to reload the page once the browser dimensions have been determined?

5

Well, here’s my plan. I’m building a social link sharing script. It’s intended use is that people submit links that are of interest, and others can view them in order by popularity, added date, views, etc. I would have loved to embed the links into the page by iframe, but have since found that many sites disallow this via headers so that was out. My attempt now is to open two windows, one a small banner window at the top which would be the control window with next, prev, random, voting and then a larger content window below which will show the submitted page. I’ve seen exactly what I’d like to do at searchtempest.com and asked aboout it on the forums here, but that topic took off like a lead balloon with the only participating respondent whizzing on my parade.

So, my goal is to do the following:

Once I have the browser dimensions and position of left corner(I haven’t figured out this part yet), I plan to use it to open and position two windows, one a control window and one content window. As I explained in the other topic, I want the new windows to open using the same real-estate as the parent window. If I know the browser size and position, I should be able to manage this in the php script. I just need to get those values to the point in which I can use them, which is the purpose of this topic :slight_smile:

My effort to convert the method from GET to POST is nothing other than cleaning up the URL’s, since the core of the site is a URL-shortening service.

6

Oh ok.
Unfortunately, if you fire off an asynchronous POST request, then no redirect will take place.

7

So the vars from jquery to php need to be passed via GET and not POST, or am I misunderstanding you?

8

They’re being passed as a query string when the page redirects.
If you fire off a POST request using $.ajax, then there will be no chance for the page to redirect.
You could use a form instead and submit that (via POST) programatically.

9

Thank you very much for your help Pullo. I think I understand the issue now. I think I’ll just embed the local page doing the width, height and position stuff in an iframe. That page should be able to generate the windows I need from the parent.

Thank you all again for your help, it’s greatly appreciated!