Resolve Alert automatically after 15 seconds

Forms
1

I am trying to pop up an alert that displays the total amount an employee has purchased after they save a self-checkout screen. If they walk away from the kiosk without hitting ok I would like the alert to go away after 15 seconds. I tried the code below and the alert displays ok but it stays unresolved unless someone clicks ok.

fd.spRendered(function()
{
$(fd.field('Employee_x0020_Number_x0028_Scan').$parent.$el).find('input').focus();
var saveButton = document.querySelector('.newbutton');
saveButton.addEventListener('click', function()
{
var employeeName = fd.field('Employee_x003a_').value;
var cost =fd.field('Total').value;
var message = employeeName + ' Thank you for your purchase, $' + cost + ' will be deducted from your check in the next payroll cycle.';
alertWithTimeout(message, 15000);
});
function alertWithTimeout(message, timeout)
{
alert(message);
setTimeout(function()
{
$('.ui-dialog').hide(); // Hide the alert dialog after timeout
}, timeout);
}

image

2

Hello @JohnnyThunder,

You can try teh approach descibed in this post:

3

Made progress on this and have it working it displays the message for 15 seconds to the user however the form stays on top of the pop up any ideas to have the popup on top?.
Pic of popup

image
image859×530 16 KB

code:

    $(fd.field('Employee_x0020_Number_x0028_Scan').$parent.$el).find('input').focus();
    var saveButton = document.querySelector('.newbutton');
    saveButton.addEventListener('click', function()
{    
    var employeeName = fd.field('Employee_x003a_').value;
    var cost = parseFloat(fd.field('Total').value).toFixed(2); 
    var message = employeeName + ' Thank you for your purchase. $' + cost + ' will be deducted from your check in the next payroll cycle.';
    displayPopup(message,15000); 
});

function displayPopup(message, duration) 
{
    var popup = document.createElement("div");
    popup.setAttribute("style", "background-color: grey;color:black; width: 650px;height: 200px;position: absolute;top:70%;left:25%;transform:translate(-50%,-50%);border: 4px solid black;font-family:arial;font-size:25px;font-weight:bold;display: flex; align-items: center; justify-content: center; text-align: center;");
    popup.innerHTML = message;
    document.body.appendChild(popup);

    setTimeout(function()
    {
        popup.parentNode.removeChild(popup);
    }, duration);
4

@mnikitina see above

5

@JohnnyThunder,

I can't reproduce the issue on my form.

How do you display Complete Purchase and Cancel Purchase buttons? Do you open them in a dialog?

7

Solution: @mnikitina got it working - Had to open as a new window not a div, need both a time for the pop up to close then slightly longer time for the form to save and close otherwise the popup remains open
code for pop up:
fd.spRendered(function(){

    $(fd.field('Employee_x0020_Number_x0028_Scan').$parent.$el).find('input').focus();
    var saveButton = document.querySelector('.newbutton');
    saveButton.addEventListener('click', function()
{    
    var employeeName = fd.field('Employee_x003a_').value;
    var cost = parseFloat(fd.field('Total').value).toFixed(2); 
    var message = 'PURCHASE CONFIRMATION' + "<br /><br />" + employeeName + ' thank you for your purchase.' + "<br /><br />" + '$' + cost + ' will be deducted from your check in the next payroll cycle.';
    displayWindow(message);
});
function displayWindow(message)
{
    var w = window.open('','Thank You','width=600,height=150,top=250,left=240,location=no,menubar=no');
    w.document.write('<html><head><title>Purchase Confirmation</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body bgcolor="#ff8b3d"><div style="text-align: center;background-color : #ff8b3d;font-family: Segoe UI;">');
    w.document.write(message);
    w.document.write('</div></body></html>');
    setTimeout(function() {w.close();}, 6500);
}

code for save button:
fd.spSaved(function(result)
{

result.RedirectUrl = "https://yoursite.com";

});

setTimeout(function() {
fd.save();
}, 6600);

Results:
image

1 Like