I want a dialog to remain opened while some data is being fetched from the server. This is my code:
(async()=>{
document.getElementById("dialog").showModal();
if(condition1 is true){
await server_call1();
}
if(condition2 is true){
await server_call2();
}
if(condition3 is true){
await server_call3();
}
document.getElementById("dialog").close();
})();
All the server_call()
are independent of each other. Upon executing the code, this error keeps popping up in my console:
Uncaught (in promise) DOMException: Failed to execute ‘showModal’ on ‘HTMLDialogElement’: The element already has an ‘open’ attribute, and therefore cannot be opened modally.
How do I resolve this issue? Please help me.
EDIT: This is my html
:
<dialog id="dialog">
<p style="font-family: cursive;">Fetching results, please wait.. </p>
</dialog>