using ajax to fetch a result from php and reload page

Question

So I have been working on this for hours now, I have read a bunch of StackOverflow posts and I am still having no luck.

I have a page that has 2 sections to it, depending on the int in the database will depend on which section is being displayed at which time.

My goal is to have the page look to see if the database status has changed from the current one and if it has then refresh the page, if not then do nothing but re-run every 10 seconds.

I run PHP at the top of my page that gets the int from the database

 $online_status = Online_status::find_by_id(1);

I then use HTML to load the status into something that jquery can access

 <input type="hidden" id="statusID" value="<?php echo $online_status->status; ?>">
<span id="result"></span>

So at the bottom of my page, I added some jquery and ajax

   $(document).ready(function(){
     $(function liveCheck(){
       var search = $('#statusID').val();
       $.ajax({
         url:'check_live.php',
         data:{search:search},
         type:'POST',
         success:function(data){
           if(!data.error){
             $newResult = $('#result').html(data);
             window.setInterval(function(){
               liveCheck();
              }, 10000); 
           }
        }
     });
   });
 liveCheck();
 });

this then goes to another PHP page that runs the following code

 if(isset($_POST['search'])){
    $current_status = $_POST['search'];
    $online_status = Online_status::find_by_id(1);
    if($current_status != $online_status->status){
       echo "<script>location.reload()&semi;</script>";
    }else{
    }
  }

the jquery then loads into the HTML section with the id of "result" as shown earlier. I know this is a very bad way to do this, and as a result, it will work at the beginning but the longer you leave it on the page the slower the page gets, till it just freezes.

If anyone is able to point me towards a proper method I would be very grateful. Thank you!!

Try adjusting the PHP file to return true or false. Then if you get true, you reload the page from javascript itself instead of inserting a new script tag with 1 line of javascript — Laurens Mäkel
– Laurens Mäkel, Commented Feb 11, 2018 at 8:06
I updated the PHP to return true but I cant get the ajax to only refresh if it is true, it either does it all that time or not at all — JonW
– JonW, Commented Feb 11, 2018 at 8:49
I tried that, I had PHP return true, I had it echo 'true' I had the JS if data == true, I had it if data == 'true' still nothing — JonW
– JonW, Commented Feb 11, 2018 at 9:14
Echo an actual boolean and not as a string. Can you try console.log (data) and share the output? — Laurens Mäkel
– Laurens Mäkel, Commented Feb 11, 2018 at 9:55

Aqrun · Accepted Answer · 2018-02-11 09:12:34Z

1

js:

(function(){
    function liveCheck(){
        var search = $('#statusID').val();
        $.ajax({
            url:'check_live.php',
            data:{search:search},
            type:'POST',
            success:function(data){
            if(data.trim() == ''){
                location.reload();
            }else{
                $('#result').html(data);
                window.setTimeout(function(){
                    liveCheck();
                }, 10000); 
            }
            }
        });
    }

    $(function(){
        liveCheck();
    });
})(jQuery)

php:

<?php
if(isset($_POST['search'])){
    $current_status = $_POST['search'];
    $online_status = Online_status::find_by_id(1);
    if($current_status != $online_status->status){
    $data = '';
    }else{
        $data = 'some html';
    }
    echo $data;
}

edited Feb 11, 2018 at 9:12

answered Feb 11, 2018 at 8:34

Aqrun

5512 gold badges4 silver badges11 bronze badges

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

9 Comments

JonW Over a year ago

I tried running that code and nothing happens, regardless of what I change the status to it does not refresh the page.

Aqrun Over a year ago

sorry, modified : data.trim == '' correct to data.trim()==''

JonW Over a year ago

page still does not refresh, weird one eh

Aqrun Over a year ago

i tested the code is all right, when your php echo empty string will refresh the current page else show the html get from php. For more info you need print out what error you got from browser or browser's console log. You need check your network request from console

JonW Over a year ago

I just used the console.log(data) and it is printing out my entire top of the page, header, and navigation. How is it getting all that data?

|

Jesse · Accepted Answer · 2018-02-11 08:31:47Z

1

Your page is slowing down because you are creating a new interval every time you call the liveCheck function. Over time, you have many intervals running and sending requests to your PHP file concurrently. You can verify this behavior by opening the developer console in your browser and monitoring the Network tab.

What you should do instead is set the interval once, and perform the $.ajax call inside that interval. Additionally, it's good practice to not send a new request if a current request is pending, by implementing a boolean state variable that is true while an request is pending and false when that request completes.

It looks like the intended behavior of your function is to just reload the page when the $online_status->status changes, is that correct? If so, change your PHP to just echo true or 1 (anything really) and rewrite your JS as:

function liveCheck() {
    if (liveCheckPending == true)
        return;
    liveCheckPending = true;
    var search = $('#statusID').val();
    $.ajax({
         url:'check_live.php',
         data:{search:search},
         type:'POST'
     }).done(function(data){
         if (!data.error)
            location.reload();
     }).always(function(data){
         liveCheckPending = false;
     });
}

var liveCheckPending = false;
setInterval(liveCheck, 10000);

answered Feb 11, 2018 at 8:31

Jesse

3252 silver badges8 bronze badges

7 Comments

JonW Over a year ago

I updated my code to match your js, I changed my php to return true and then tried it with echo true and the page just keeps reloading, it shouldn't reload unless the php condition is true.

Jesse Over a year ago

Change if (!data.error) to if (data) and try again.

Jesse Over a year ago

You get the basic idea, though. Perhaps just have it echo the string true instead of the boolean value true and then have the conditional check for if (data == "true"). The PHP script should be outputting nothing at all if the status hasn't changed, and anything printable if it has. You can check what the PHP script is sending back to you by viewing the Network tab in the Developer Console in your browser.

JonW Over a year ago

Since the last post I have been trying it with true in quotesl, this is what I have now and it does not reload, so I am guessing that I am getting something else back from the PHP, my console does not show anything.

JonW Over a year ago

|

Collectives™ on Stack Overflow

using ajax to fetch a result from php and reload page

2 Answers 2

9 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related