ajax请求服务器端脚本（控制器）获取服务器状态

Question

I want to get a server side response for a button in a twig page. As a example - there will be 2 button in the page ---

ON/OFF

When the page load it should check from server (check from elasticsearch database) whether it returns True or false, for both button.

So for instanse we say that for ON button it return "True" it should change it color to green, like ----

$(this).addClass('btn-success');
$(this).removeClass('btn-primary');

The main purpose is to check what's the current status, when the page load.

So this is not a on-click function, because it show show the status when the page is loaded.

This is my client side code ---

$(document).ready(function(){
   //send the request with empty data to the server to check the status
   $.post('/url/to/action', {}, function(msg){
     // we return a response like {status: 'on'} to the client if the search is on
     if (msg.status == 'on'){
       $('#my-button').addClass('success');
     }
     // else it is disabled
     else
       $('#my-button').addClass('primary');
   });
});

this is the integration with my symfony application ---

public function getStatusAction(Request $request){
    if ($output = !null) {
        return new \Symfony\Component\HttpFoundation\JsonResponse(array('status' => 'on'));
    } else {
        return new \Symfony\Component\HttpFoundation\JsonResponse(array('status' => 'off'));
    }
}

This is the status when i run to get the status

Now the problem is when the page is loading it is not rerurning the status for the button. I mean if the "status == 'on'" the button should be green instead of primary.

Do anyone knows how i can fix this problem.

Answer 1

to make that, you can use setInterval

function refreshStatus () {
    $.post('/url/to/action', {}, function (msg) {
        // we return a response like {status: 'on'} to the client if the search is on
        if (msg.status == 'on'){
            $('#my-button').addClass('success');
        }
        // else it is disabled
        else
            $('#my-button').addClass('primary');
    });
}

refreshStatus(); // call on page load
setInterval(refreshStatus, 5000); // call refreshStatus every 5 seconds