Ajax, add GET var onload

Question

I would like, when i'm loading a webpage, to add in GET the width and height of the screen, so that my page can use these var to redirect to a specific page.

I've looked for the function and it seems that I should use window.screen.width and window.screen.height

Also, I figured out I should use $.get() to send the variables.

So I came out with this script, but i assume i'm mixing JS and AJAX which I don't if it's ok or not. And most of all, I don't know how to run the function when my page is loading.

    $(document).ready(function() {
    ratio();
function ratio() {
    var Vorientation;
    if(window.screen.width>window.screen.height)
    {
       Vorientation = 1;
    }
    else
    {
       Vorientation = 2;
    }
    $.get( "index.php?orientation="+Vorientation );
    alert("ok");
 }
  });

Here is the html :

    <body>

<?php 
if(isset($_GET['orientation']))
{
echo"ok";
} 
?>

</body>

`mixing js and ajax`: AJAX is not a language, it's a way of retrieving a response from a server (e.g. from PHP code) with javascript, often used to generate content on the page based on user input. `$.get` is jQuery (which is a js lib) to perform a ajax `GET`request — online Thomas, Dec 16 '16 at 08:34
@asdf_enel_hak Actually, the way the OP's using it, it's a global variable. You're right though; it should be declared before the if like `var Vorientation;` — qxz, Dec 16 '16 at 08:36

Mihai Alexandru-Ionut · Answer 1 · 2016-12-16T08:41:12.940

2

To run the function when your page is loading, you have to wrap code in $(document).ready(function(){ }); function.

Use this:

$(document).ready(function(){
    window.Vorientation=0;
    ratio();
    function ratio() {
        if(window.screen.width>window.screen.height)
        {
           Vorientation = 1;
        }
        else
        {
           Vorientation = 2;
        }
        $.get( "index.php", { orientation: Vorientation} )
           .done(function( data ) {
              alert( "Data Loaded: " + data );
           });
   }
});

edited Dec 16 '16 at 08:41

answered Dec 16 '16 at 08:37

Mihai Alexandru-Ionut

47,092
13
101
128

I think Vorientation need to be declared outside of the if/else no ? – EQuimper Dec 16 '16 at 08:38
1

It needs to be declared in the first place. Using a global isn't right here – qxz Dec 16 '16 at 08:39

score 2 · Answer 2 · edited Dec 16 '16 at 09:13

2

You just need to add jQuery to your script and add your code in the document ready function https://learn.jquery.com/using-jquery-core/document-ready/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

$(function() {
    ratio();
    function ratio() {
        var Vorientation;
        if(window.screen.width>window.screen.height) {
            Vorientation = 1;
        } else {
            Vorientation = 2;
        }
        $.get("index.php", { orientation: Vorientation})
            .done(function(data) {
                alert("Data Loaded: " + data);
            });
    }
});

edited Dec 16 '16 at 09:13

Cerbrus

70,800
18
132
147

answered Dec 16 '16 at 08:39

EQuimper

5,811
8
29
42

Now i've got an alert with the data loaded.. tho my link is still the same and i can't see the `?orientation=Vorientation` – B.T Dec 16 '16 at 08:42
@Ezhno, do you have errors in console ? – Mihai Alexandru-Ionut Dec 16 '16 at 08:43
1

AJAX requests happen in the background. They don't change the URL in your browser's address bar; they just return the response data to your callback function (`data` here). – qxz Dec 16 '16 at 08:43
@Alexandru-IonutMihai No errors, but it show the page source code. – B.T Dec 16 '16 at 08:45
But I think of this, not best to use the https://developer.mozilla.org/en/docs/Web/API/Screen/orientation ? – EQuimper Dec 16 '16 at 08:45
@EQuimper I could indeed. But it's not so much for the orientation that i've got problem, it's really how to get my var in PHP so I can load news pages. – B.T Dec 16 '16 at 08:50
1

Do you ask how can you get the value of `Vorientation` on server-side ? – Mihai Alexandru-Ionut Dec 16 '16 at 08:51
@EQuimper The goal is that when the page is loaded, the script get the orientation, and the php includes some code depending if it's landscape or portrait – B.T Dec 16 '16 at 08:51
@EQuimper Yes, indeed. Simply with a `$_POST['Vorientation']` ? – B.T Dec 16 '16 at 08:52
1

can you console.log(Vorientation) before the ajax ? just for be sure this is not the problem. I don't know how you handle your server :( – EQuimper Dec 16 '16 at 08:53
1

@Ezhno, youy need to use this: `$_POST['orientation']`, not `$_POST['Vorientation']`, because you send with this: `{ orientation: Vorientation}` – Mihai Alexandru-Ionut Dec 16 '16 at 08:55
2

If your PHP is getting values from the query string, try `$.get( "index.php?orientation="+Vorientation )`. `$_POST` won't work with this client code because you're sending a GET request. – qxz Dec 16 '16 at 08:55
@Alexandru-IonutMihai Indeed, me bad – B.T Dec 16 '16 at 08:57
@qxz I see. Thank you – B.T Dec 16 '16 at 08:57
1

Good job @Alexandru-IonutMihai and qxz – EQuimper Dec 16 '16 at 08:58
@Ezhno, use this: `$_GET['orientation']` – Mihai Alexandru-Ionut Dec 16 '16 at 08:59
On my page, using a $_GET['orientation'] doesn't return anything because it's unset. I added an alert in my script for debug and it seems not to be executed when the page is loaded. Please have a look at my answer. I'm updating the script I actually have. – B.T Dec 16 '16 at 09:16
@Ezhno, Do you included jquery plugin ? Do you have errors in console ? – Mihai Alexandru-Ionut Dec 16 '16 at 09:20
@Alexandru-IonutMihai I don't think I have errors tho how do I access console ? And yes I added the `` – B.T Dec 16 '16 at 09:27
Press F12, then `Console` tab. – Mihai Alexandru-Ionut Dec 16 '16 at 09:29
@Alexandru-IonutMihai There is no errors in the console – B.T Dec 16 '16 at 09:36
Well, then remove document.ready and try this:`` – Mihai Alexandru-Ionut Dec 16 '16 at 09:46
@Ezhno, it is working ? – Mihai Alexandru-Ionut Dec 16 '16 at 12:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/130795/discussion-between-alexandru-ionut-mihai-and-ezhno). – Mihai Alexandru-Ionut Dec 16 '16 at 14:29

Ajax, add GET var onload

2 Answers2