How to create a custom dialog in Javascript with no JQuery?

Question

On an ESP32, I have developed a wireless web server from scratch using micropython. Please correct me if I'm wrong, but I think using libraries like Flask and JQuery is not possible.

I've had lots of trouble running out of memory composing HTML pages. Currently, keeping an HTML page under 10k bytes avoids trouble. I use javascript as much as possible to reduce the HTML size and improve response time.

I need a dialog that has about 6 buttons. Each button posts a message to the server instructing a simple action.

I would like to do something like the following, which does not work.

dialog = document.createElement('dialog');
document.appendChild(dialog);

closeButton = document.createElement("button");
closeButton.innerHtml = "Close";
closeButton.onclick = function() {
   // figure out how to close this dialog
}
dialog.appendChild(closeButton);

dialog.showModal();

Any advice or a pointer to a useful tutorial will be greatly appreciated.

Answer 1

I had the same issue, I end-up using a Python script to minimize HTML and JS before I build/flash.

Then I used WebSocket to avoid extras HTML/JS code needed for every traditional HTTP POST. Also, using WebSocket avoid extras work of ESP32 to process HTML POST/GET, instead, WebSocket sends "BUTTON_1_CLICKED".

Hop this helps you.

Answer 2

The key thing I did not understand is that I should create a dialog element within the body of my page, not in the document. I added an id to my body element. In JavaScript, I find it. The I can create a dialog and use appendChild to put it under body.

From there it's cake. I use document.createElement to make various button and label objects. I use appendChild to add them to my dialog.

Finally, I created a “Close” button and use dialog.close() method to terminate.