Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Countdown timer doesn't work inside jConfirm #571

Closed
BTINEL opened this issue May 22, 2023 · 1 comment
Closed

Countdown timer doesn't work inside jConfirm #571

BTINEL opened this issue May 22, 2023 · 1 comment

Comments

@BTINEL
Copy link

BTINEL commented May 22, 2023

jquery version:
jquery-3.6.0

jquery-confirm version:
v3.3.4

I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[X] support request

Current behavior:
I need to implement a countdown timer in a jConfirm message that states that "The system will restart in XX seconds", where XX is a value corectly received with a jquery ajax call.
The $content is corectly initiated with first XX value, but the setTimeout Timer doesn't run.
In the presented code I tried to push the setInterval function outside the jConfirm message, but I also tried to set-up the setTimeout timer inside the .done method of Ajax call and, also, inside the onContentReady trigger. After no luck, i tried to push the call to a function "tt" outside my jConfirm message.

Expected behavior:
The $content is updated with a decrementing XX seconds value, toward zero.
I haven't identified any reason why (apparently) doesn't run. Please help.

Steps to reproduce:
url: 'cmd_system.php' simply return a string "Success|mysql.restart|39" or "Success|sistem.restart|39". The value "39" is any value between 0 and 59, being the seconds until the current minute ends, and it is the initialisation value for the countdown.
The jConfirm lazy message is called from another jConfirm with following code, but I guess it's irrelevant:

        buttons: 
        {
            ok: 
            {
                btnClass: 'btn-red', 
                 text: 'Yes, proceed with this action!', 
                 action: function(){mesaj_cmd_system.open()}
            },

Related code:

var ttt,tt_sec,tt_tip;

let mesaj_cmd_system = $.alert(
{
    lazyOpen: true,
    title: 'INFO',
    content: function () 
    {
        var self = this;
        if ( !(accepted.indexOf(cmd) > -1) )
            return;
        var formData = new FormData();
        formData.append('cmd', cmd);
        formData.append('crc', crc);

        return $.ajax(
        {
            url: 'cmd_system.php',
            dataType: 'text',
            data : formData,
            processData: false,
            contentType: false,
            method: 'post'
        }).done(function (response)
        {
            if(response.length && response.search('Success\\|mysql\.restart')==0)
            {
                self.setTitle('EFECTUAT!');
                self.setContent('S-a initiat repornirea serviciului MySQL.<type1/>');
                // response is a string: "Success|mysql.restart|39". The value "39" is the initialisation value for the countdown.
                tt_sec = 1*response.split('|')[2];
            }
            
            if(response.length && response.search('Success\\|sistem\.restart')==0)
            {
                self.setTitle('EFECTUAT!');
                self.setContent('S-a initiat repornirea ma&#537;inii virtuale.<type2/>');
                tt_sec = 1*response.split('|')[2];
                
            }
    },
    onContentReady: function ()
    {
        var self = this;
        self.setTitle('CMD');
        tt(self,self.$content);
    },
    onClose: function ()
    {
        clearInterval(ttt); ttt=0;
    }
    
});

function tt(o,c)
{
    //console.log('sec = '+tt_sec+'\nTYPE1: '+c.find('type1').length+'\nTYPE2: '+c.find('type2').length);
    ttt = setTimeout(() => {
            if(tt_sec>0) {tt_sec--;}
            else {clearInterval(ttt); ttt=0;}
            
            if (c.find('type1').length)
                mesaj_cmd_system.setContent('Repornirea serviciului MySQL va avea loc &#238\;n '+tt_sec+' secunde.<type1/>');
            if (c.find('type2').length)
                mesaj_cmd_system.setContent('Repornirea ma&#537;inii virtuale va avea loc &#238\;n '+tt_sec+' secunde.<type2/>');
        }, 1000);
}

Other information:

@BTINEL BTINEL changed the title Countdown times doesn't work inside jConfirm Countdown timer doesn't work inside jConfirm May 23, 2023
@BTINEL
Copy link
Author

BTINEL commented May 23, 2023

It turns out that wasn't an jConfirm issue, but the improper use of setTimeout function.
Solved either by recalling the timer when using setTimeout, or by using setInterval instead of setTimeout.

@BTINEL BTINEL closed this as completed May 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant