PHP script doesn't wait for Ajax and jQuery document.ready

Question

I'm new to PHP and Ajax. I am working on a dynamic website for personal use which requires the website to respond to the window width of the client.

At the moment this is set up to send the width through an Ajax GET request and just print the size back to the screen, although this PHP script will print a response before the page gets to load, leaving a static 'width < 1275' at the top of the page which will never be removed.

How would I go about solving this issue? Thanks

HTML

<body>
    <div class="contents">

    </div>
</body>

JavaScript

$(document).ready(function() {

    var width = $(window).width();

    $.ajax({
        url: 'functions.php', 
        type: 'GET', 
        data: {size : width},
        success: function(response) {
            $('#contents').html(response);
        }
    });

    $(window).resize(function() {
        var width = $(window).width();
        $.ajax({
            url: 'functions.php', 
            type: 'GET', 
            data: {size : width},
            success: function(response) {
                $('#contents').html(response);
            }
        });
    });
});

PHP

<?php
    $width = $_GET['size'] ?? '';

    if($width < 1275)
    {
        echo('<div class="column">' . 'width < 1275' . '</div>');
    }
    else
    {
        echo('<div class="column">' . 'width > 1275' . '</div>');
    }
?>

Here's a screenshot if I cant explain my problem imgur.com/kHAWMJq — soza.pidgeon
– soza.pidgeon, Commented Dec 23, 2019 at 12:25
Out of curiosity, why are you sending this to PHP at all? Why not just do it in JS directly? — M. Eriksson
– M. Eriksson, Commented Dec 23, 2019 at 12:26
Theres a number of things I want printed to the page dependant on the screen size, and I'd like to order them prior to the client receiving them — soza.pidgeon
– soza.pidgeon, Commented Dec 23, 2019 at 12:38

Shiba Das · Accepted Answer · 2019-12-24 10:21:04Z

1

Well your js code is just fine. 1s make sure you have jquery, here is the CDN: https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js , Then change <div class="contents"> to <div id="contents"> because $('#contents').html(response); '#' is for id selector & '.' for class so $('.contents').html(response); will be the code if you want to use class for DOM. and in php part functions.php do something like this :

   <?php
    if(isset($_GET['size'] )){
            $width = $_GET['size'] ;

    if($width < 1275)
    {
        echo('<div class="column">' . 'width < 1275' . '</div>');
    }
    else
    {
        echo('<div class="column">' . 'width > 1275' . '</div>');
    }


    }
    else{

        echo " nothing found";
    }

?>

and here is my index page :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<body>
    <div id="contents">

    </div>
</body>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {

    var width = $(window).width();
    resize(width);


    $(window).resize(function() {
        var width = $(window).width();
        resize(width);
    });



       function resize(width){

        $.ajax({
        url: 'functions.php', 
        type: 'GET',

        data: {size : width},
        success: function(response) {
            console.log(response);
            $('#contents').html(response);
        }
    });

    }
});




</script>

edited Dec 24, 2019 at 10:21

answered Dec 23, 2019 at 12:51

Shiba Das

3676 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

soza.pidgeon Over a year ago

My bad that should have been id="content" from the beginning, after trying what you've left it now prints 'nothing found' at the top of the page with the correct functionality underneath imgur.com/a/1FOxGLL

Shiba Das Over a year ago

its showing because , size variable that you are passing via ajax has no value in it ,simply means data: {size : width}, here variable 'width' has no value , put a 'console.log(width)' inside '$(window).resize()' function and check if you are getting value in width via browser console.

Shiba Das Over a year ago

i have updated my answer with full code , working on my end..

soza.pidgeon Over a year ago

Thankyou, I checked the files you suggested with success. After implementing into my own project I received a 'nothing found' above all the other elements so I have just commented that echo out and everything runs smoothly.

HP371 · Accepted Answer · 2019-12-23 12:21:18Z

0

Try your AJAX code with async: false like:

$(document).ready(function() {

    var width = $(window).width();

    $.ajax({
        url: 'functions.php', 
        type: 'GET', 
        async: false,
        data: {size : width},
        success: function(response) {
            $('#contents').html(response);
        }
    });

    $(window).resize(function() {
        var width = $(window).width();
        $.ajax({
            url: 'functions.php', 
            type: 'GET', 
            async: false,
            data: {size : width},
            success: function(response) {
                $('#contents').html(response);
            }
        });
    });
});

answered Dec 23, 2019 at 12:21

HP371

8501 gold badge11 silver badges25 bronze badges

4 Comments

soza.pidgeon Over a year ago

No such luck sadly

HP371 Over a year ago

In Ajax success response you used the same div id '#contents' so it overrides the first result with the second one. so try with another div id.

soza.pidgeon Over a year ago

The problem is a premature print of the 'width < 1275' to the top of the page, will this remove that top printed text? imgur.com/kHAWMJq

HP371 Over a year ago

Try with using $_POST in php side and use type POST method in ajax.

Collectives™ on Stack Overflow

PHP script doesn't wait for Ajax and jQuery document.ready

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related