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?
I encountered exactly the same problem . It turned out to be "animate.css" package version that causing the n.close() not work. Because it close when anmation end, and animate.css wrong version can make animation not work, so Noty cannot close.