0

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

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.

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Istiak Mahmood
  • 2,330
  • 8
  • 31
  • 73

1 Answers1

0

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
mmm
  • 1,070
  • 1
  • 7
  • 15
  • setTimeout is much better then setInterval by @Quasimodo's clone http://stackoverflow.com/questions/23178015/recursive-function-vs-setinterval-vs-settimeout-javascript#answer-24320973setInterval is useful for more accurate periodic calls over recursive setTimeout, The drawback is callback will be triggered even if an uncaught exception was thrown. Furthermore a setInterval callback with heavy load could become unresponsive Recursive setTimeout will guarantee a time frame for other tasks after return from the callback function independent of the function's execution time. – CY5 Aug 03 '15 at 07:36
  • this answer of *Quasimodo's clone* has only 2 votes, have you other sources ? – mmm Aug 03 '15 at 07:42
  • @mmm thanks for your answer, but it will always return "Uncaught ReferenceError: refreshStatus is not defined" – Istiak Mahmood Aug 03 '15 at 07:49
  • @christofer Hansen check this why to use setTimeout over setInterval,In set http://reallifejs.com/brainchunks/repeated-events-timeout-or-interval/ – CY5 Aug 03 '15 at 07:52