Show waiting page while server reboots

Question

I have a server and create a web interface for it, if a user presses the reboot button on the page, then the user is redirected to reboot.php where he is supposed to see a spinner gif till the server is reachable again and the server is getting rebooted via shell execute. If the server is reachable then i need to redirect to main.php

So i created the following function. The function starts with a timeout of 5 seconds, because otherwise it would instantly load main.php because the reboot command takes it's time.

reboot.php

    $ret = false;

    test();

    function test()
    {
        setTimeout
        (
            function()
            {
                 $ret = ping("www.google.de");
                 if ($ret === false)
                 {
                     test();
                 }
                 else
                 {
                     window.location.href = "main.php";
                 }
            },
            3000
        );
    }

    function ping(url)
    {
        $.ajax
        (
            {
                url: url,
                success: function(result)
                {
                    alert('reply');
                    return true;
                },     
                error: function(result)
                {
                    alert('timeout/error');
                    return false;
                }
            }
        );
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div class="col-lg-6 col-lg-offset-3" id="mydiv">
        <div class="mydiv_inhalt">
            <h2>Rebooting...</h2>
            <p>This can take about 2 minutes.</p>
            <center>
                <div class="waiting" id="waiting" style="margin-top:30px; margin-left: 0px;">
                    <center><img class="loading_table" src="http://www.securenet.com/sites/default/files/spinner.gif" alt="spinner gif"></center>
                </div>
            </center>
        </div>
    </div>

ajax.php

$cmd        = filter_input(INPUT_POST, "cmd");
if ( isset( $cmd ) && $cmd == "check_online_status" )
{
    echo "true";
}

In my ajax.php i simply return "true" if the call was successful. However, my logic does not work, it seems that my code only tries to make one call to my ajax.php and then never tries again and i get net::ERR_CONNECTION_REFUSED in the console.

I put many alerts into my code, but they are not executed, so i guess it does not try to call ajax.php a second time after getting net::ERR_CONNECTION_REFUSED.

My only idea would be to wait enough time and then redirect to main.php, but this is not a good solution because luck is needed, what if the time was not enough etc.

Answer 1

Let's summarize the issues in your code:

• you need to use setInterval to execute the function every x seconds
• the ajax request is asynchronous, and it should stay like that. You can't expect a return value from the callback, instead, you should act in the callback

The resulting code is way simpler:

var pingUrl = "www.google.de";
var targetUrl = "main.php";
setInterval(ping, 3000);

function ping() {
    $.ajax({
        url: pingUrl,
        success: function(result) {
            window.location.href = targetUrl;
        }
    });
}

Answer 2

@EdwardBlack fisrt you have to assing .gif image to image tag with id then in that image tag you to pass style="display:none"

<img id="imgid" src="" style="display:none">

function ping(url) {

        $.ajax({
              
                url: url,
                beforeSend : function(){
                   $('#imgid').css({'display':'block'}); //or 
                   $('#imgid').css('display', 'block');   // any one
                }, 
                success: function() {
                    alert('reply');
                    return true;
                },     
                error: function() {
                    alert('timeout/error');
                    return false;
                }
            });
    }