'Show javascript Alert without blocking javascript

On page load, I am starting a timer to check if session is expired. I am checking expiry by making ajax call to a page. I need to display alert 5 minutes before expiry and redirect to default page after expiry. Here is my code:

function startSessionCheckTimer() {
    setInterval(checkSessionExpiry, 60000);
}

function checkSessionExpiry() {
    $.ajax({
        type: "POST",
        url: "/Default.aspx/IsSessionOpen",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (time) {
            if (time.d == 5) {
                //alert("Your session will expire in 5 minutes.");
                setTimeout(function () { alert('Your session will expire in 5 minutes.'); }, 100);
            }
            else if (time.d <= 0) {
                window.location = "/Default.aspx";
            }
        }
    });
}

Alert is displayed after 5 minutes, but if user does not click OK, it blocks the javascript and no further ajax calls are made.

Is there a way that I can display Alert without blocking it? I do not want to using jQuery dialog.

javascriptjqueryhtmlasp.netasp.net-mvc


Solution 1:[1]

No, there is no way to display a native alert without halting the execution of the script.

The only way is to use a dialog or something that is not a native alert

http://jqueryui.com/dialog/

Solution 2:[2]

Thanks adeneo!! I wanted to keep the page light, so I ended up having my custom HTML popup.

Below is the code I used for custom html popup, might be useful to someone:

CSS:

.disablepagediv {
    z-index: 1001;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;             
    background-color: rgba(0,0,0,0.5);
    color: #aaaaaa;
}

.masterpopup {
    width: 270px;
    height: 100px;
    position: absolute;
    color: #000000;
    background-color: #ffffff;
    /* To align popup window at the center of screen*/
    top: 200px;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    border: 1px solid rgb(124, 153, 193);
}

HTML:

<div id="popDiv" class="disablepagediv">
    <div class="masterpopup">
        <div style="height:25px;line-height:25px;background-color:rgb(6, 62, 137);color:white;padding-left:5px;">
            Warning
        </div>
        <div align="center" style="padding-top:5px">
            Your session will expire in <label id="lblSessionExpiryMins"></label> minutes.
            <br/>
            <input type="button" style="margin:5px" onClick="hide('popDiv')" value="Close" />
        </div>
    </div>
</div>

JavaScript:

function startSessionCheckTimer() {
    setInterval(checkSessionExpiry, 60000);
}

function checkSessionExpiry() {
    $.ajax({
        type: "POST",
        url: "/Default.aspx/IsSessionOpen",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (time) {
            if (time.d <= 0) {
                window.location = "/Default.aspx";
            }
            else if (time.d <= 5) {
                document.getElementById('lblSessionExpiryMins').innerHTML = time.d;

                if (time.d == 5 || time.d == 1) {
                    pop('popDiv');
                }
            }
        }
    });
}

$(document).ready(function () {
    startSessionCheckTimer();
});

function pop(div) {
    document.getElementById(div).style.display = 'block';
}
function hide(div) {
    document.getElementById(div).style.display = 'none';
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 adeneo
Solution 2 Tushar Kesare

Related Questions