question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Question: confirmation pop-up in frontend

See original GitHub issue

Hi. What is the recommended approach to implement frontend/client-side confirmation using Javascript code such as confirm("...")?

The use case is as follows: the Python code of the view generates an HTML table with several rows, one per data item (the data items are fetched from another backend). One of the table columns has a delete button / link. When the user clicks the delete link, I want to show a confirmation pop-up to the user first, to avoid that they accidentally delete items. I only want to handle the input event if the user confirmed the prompt (clicking “Yes”).

What I already tried (and it did not work) was to send something like A("delete", href=f"javascript:deleteItem('{item.name}')") to the frontend. When the user then clicks on the link, my javascript code (deleteItem()) is not executed (the Web Developer Tools breakpoint does not trigger), but instead I get constant exceptions such as this:

Exception { name: "NS_ERROR_FAILURE", message: "", result: 2147500037, filename: "http://localhost:8080/static/lona/lona.js", lineNumber: 1499, columnNumber: 0, data: null, stack: "Lona.LonaWindow/this._handle_websocket_message@http://localhost:8080/static/lona/lona.js:1499:25\nLona.LonaWindow/this.handle_websocket_message@http://localhost:8080/static/lona/lona.js:1572:25\nLona.LonaContext/this._handle_raw_websocket_message@http://localhost:8080/static/lona/lona.js:1852:25\nEventHandlerNonNull*Lona.LonaContext/this.reconnect@http://localhost:8080/static/lona/lona.js:1872:9\nLona.LonaContext/this.setup@http://localhost:8080/static/lona/lona.js:1904:14\n@http://localhost:8080/:41:22\n" }```

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:12 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
fscherfcommented, Sep 11, 2021

@MShekow In the meantime i added a demo that seems to do pretty much what you are looking for i guess https://lona-web.org/demos/bootstrap-5-confirmation-popup/index.html

1reaction
fscherfcommented, Sep 2, 2021

Hi @MShekow

Also thank you for the new example you provided. Since I need my view to both regularly refresh data (in the while loop of handle_request()) and handle click events, I’ll probably use handle_input_event(). If I understood it correctly, I can simply replace data = [ ... ] with self.data = [ ... ] (in the first line of handle_request()), and then also reference self.data in handle_input_event(). The content of self.data should then be independent for every client.

Yes you are right, you can access self.data from handle_request() and handle_input_event() and that’s no hack to do so, its designed that way.

Popup: In the meantime i released the first version of lona-bootstrap-5 which has native support for modals https://github.com/lona-web-org/lona-bootstrap-5#modal

Doing two things at the same time: Lona 1.5 has support for callback based input event handling now. Maybe that helps https://lona-web.org/end-user-documentation/views.html#handling-input-events-in-a-callback

Read more comments on GitHub >

github_iconTop Results From Across the Web

Window confirm() Method - W3Schools
The confirm() method displays a dialog box with a message, an OK button, and a Cancel button. The confirm() method returns true if...
Read more >
Confirmation Dialogs Can Prevent User Errors (If Not Overused)
In graphical user interfaces, a confirmation dialog usually takes the form of a modal dialog box that pops up and must be attended...
Read more >
Add confirmation dialog to React events | by Tomáš Ehrlich
A short example of render prop component which adds a confirmation step to any React event, like form submit or button click.
Read more >
Confirmation Popup Node JS - javascript - Stack Overflow
You should handle this confirmation logic in frontend part before sending request to backend. This will simplify the architecture of your ...
Read more >
How to use JavaScript to show a confirm message?
A confirmation dialog box usually gets triggered in response to some action requested by the user. This action can be anything like opening...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found