How to call js Function from setInterval()

Question

AIM: I would like to set the below function to call every 5 seconds. Using qtip.

The variable ALARM_POPUP changes every minute via a shellscript which replaces the contents on the variable.

CODE:

    function popupTXT()

         {

              var ALARM_POPUP="Alarm Warning warning ";

              $('#telecom_1').qtip({content:ALARM_POPUP,style: {name: 'dark', tip: 'topLeft'} });

        };

I am using the below to call on a timer.

    setInterval("popupTXT()",5000);

OUTCOME: This will only work when I refresh the browser. Any suggestions would be appreciated

Answer 1

The variable ALARM_POPUP changes every minute via a shellscript which replaces the contents on the variable.

That means that in order to see that change on the page, you have to call the server to get an updated value. You're not doing that.

You could do that via ajax. Create a server-side page that outputs the new value for ALARM_POPUP as raw text (using Content-Type: text/plain) or as JSON (using Content-Type: application/json), and trigger an ajax call to get the contents of that page, then update the qtip with it. You wouldn't want setInterval for that because with the indeterminate length of time the ajax call would take, things would very quickly become chaotic. Instead, just initiate a setTimeout upon completion of the previous cycle.

Assuming you create an updatealarm.xyz page (PHP, JSP, ASP.Net, whatever) that outputs the current ALARM_POPUP value as plain text, that would look something like this:

(function()
{
    var ALARM_POPUP="Alarm Warning warning ";

    function updateQtip(popupText)
    {
        $('#telecom_1').qtip({content:popupText,style: {name: 'dark', tip: 'topLeft'} });
        setTimeout(nextUpdate, 5000);
    }

    function nextUpdate()
    {
        $.ajax({
            url: "updatealarm.xyz",
            success: function(data)
            {
                ALARM_POPUP = data; // Although you don't actually need to update it
                updateQtip(data);
            },
            error: function()
            {
                // Do error handling
            }
        });
    }

    updateQtip();

})();

About your original setInterval call: It's best not to pass strings into setInterval or setTimeout; that's basically doing an eval, and it's neither necessary nor a good idea. Instead, pass in a function reference (e.g., the function's name, without () calling it), as above.

---

Re your comment below:

I am having problems with this and I was wondering if you provide an example of what the php file would look like

I've only done a little PHP, but I believe it would look like this:

<?php
    header('Content-Type: text/plain');
    echo 'This is the message that will end up in \'data\' in the ajax success handler.';
?>

Or if you prefer to use a variable to make it easier for your sed script:

<?php
    header('Content-Type: text/plain');
    $alarm_popup = 'This is the message that will end up in \'data\' in the ajax success handler.';
    echo $alarm_popup;
?>