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

admin管理员组

文章数量:1336663

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.

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.

• javascript
• dialog
• esp32
• micropython

Share Improve this question Follow asked Nov 20, 2024 at 22:55 Bill EwingBill Ewing 1 4

• 4 does documentation help? – Jaromanda X Commented Nov 20, 2024 at 23:19
• Why do you think it’s not possible to use query? Its a JavaScript library that runs in the browser. – romkey Commented Nov 21, 2024 at 0:40
• Jaromanda, thank you for trying to help. Please reread my question. You proposed an HTML-heavy solution. – Bill Ewing Commented Nov 22, 2024 at 18:40
• Thank you, I did not realize JQuery is always resident on clients and will look into. And yet, still is it possible to use simple JS to make a dialog? – Bill Ewing Commented Nov 22, 2024 at 18:41

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

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.

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.

本文标签： How to create a custom dialog in Javascript with no JQueryStack Overflow