The idea is to check if a certain page is available every second. When the page is available, I want to show a Noty-modal where user can choose to reload the current page or to close the modal. I use Noty.js v3.1.4.
JS Code
<script>
var n = new Noty({
text: "Website under construction",
type: 'alert',
layout: 'center',
theme: 'bootstrap-v4',
modal: 'true',
buttons: [
Noty.button("Yes", "btn btn-primary", function () {
location.reload();
}),
Noty.button("No", "btn btn-primary ml-3", function () {
checkAvailability = true;
n.close();
})],
animation: {
open: 'animated fadeIn faster',
close: 'animated fadeOut faster'
}
});
var checkAvailability = true;
var timeout = 1000;
(function(){
if (checkAvailability) {
$.ajax({
url: "https://example.com",
type : 'HEAD',
success : function(){
//website is available
checkAvailability = false;
timeout = 30000; // set timeout to 30 seconds, no need to check every second anymore
n.show();
},
error: function (){
//website is not available
checkAvailability = true;
timeout = 1000;
}
});
}
setTimeout(arguments.callee, timeout);
})();
</script>
The AJAX request works and at a certain moment the Noty Modal shows up. Now when I click on 'No', the modal won't close. I see that n.closed changes from false to true, but the modal doesn't disappear. There is no log in the console. Any idea what's wrong?