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>

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>

• javascript

• Post html too. The element already has an 'open' attribute – Simone Rossaini Commented Dec 14, 2022 at 10:54
• I have posted. Please see – user20774523 Commented Dec 14, 2022 at 10:57
• I am not able to reproduce that problem: jsfiddle/gev6k95s – Ivar Commented Dec 14, 2022 at 10:59
• As @Ivar example there is nothing wrong with that code, is it possible that the function server_call* calls a dialog? – Simone Rossaini Commented Dec 14, 2022 at 11:03

4 Answers 4

I just put a call to close before every call to open e.g.

dialog.close();
dialog.showModal();

Throwing an exception for opening twice is strange behavior i think

From the mdn docs about HTMLDialogElement.showModal()

https://developer.mozilla/en-US/docs/Web/API/HTMLDialogElement/showModal

InvalidStateError DOMException Thrown if the dialog is already open (i.e. if the open attribute is already set on the element).

Here's your code working as expected in a live snippet:

async function sleep(time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

async function server_call(){
  await sleep(500);
}

(async()=>{
  document.getElementById("dialog").showModal();    
  await server_call();
  await server_call();
  await server_call();
  document.getElementById("dialog").close();
})();

<dialog id="dialog">
  <p style="font-family: cursive;">Fetching results, please wait 2 seconds.. </p>
</dialog>

This happened to me because I created a dialog in JS only.

To solve this, I added the dialog I just created to the DOM.

A minor improvement to @lee-penkman 's answer (https://stackoverflow./a/76083474/46914)

Instead of always naively closing the dialog every time, you can check if it has an open attribute and then close it if it does.

if (dialog.hasAttribute('open')) {
  close.close()
}

dialog.openModal()