Question: confirmation pop-up in frontend

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" }```

[fscherf]

@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

[fscherf]

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