Question: confirmation pop-up in frontend

[MShekow]

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]

Hi @MShekow,

Does the popup has to be a Javascript confirm? I would recommend to use something like bootstrap modals, which are made of html and css.

https://getbootstrap.com/docs/5.0/components/modal/

I made a custom package for my company, based on bootstrap3 which defines Popups using bootstrap3 modals. Works like a charm! I currently work on a public package with the same functionality based on bootstrap 5

[MShekow]

Yes, it could totally be the Bootstrap 5 modal. I'm using Bootstrap 5 anyway. I'll try setting up the modal as explained here (because I need the modal's content to be adaptive, showing the item's name that the user is about to delete).

[fscherf]

@MShekow i made a small prototype without bootstrap5 for you. You just have to add the bootstrap5 specific parts.
Maybe you want to use a string based approach to setup the popups HTML. I used Nodes because its simpler in a single script.

https://lona-web.org/cookbook/using-traditional-html.html

from lona.html import Widget, HTML, H1, Div, Button
from lona import LonaApp, LonaView

app = LonaApp(__file__)


class Popup(Widget):
    def __init__(self):
        self.nodes = [
            Div(
                Div(_class='popup-title'),
                Div(_class='popup-body'),
                Div(
                    Button('Confirm', _class='confirm'),
                    Button('Cancel', _class='cancel'),
                    _class='popup-buttons'
                ),
                _class='popup'
            )
        ]

        self.confirm_button = self.query_selector('.confirm')
        self.cancel_button = self.query_selector('.cancel')

        self.hide()

    def hide(self):
        self.nodes[0].style['display'] = 'none'

    def show(self):
        with self.lock:
            if 'display' in self.nodes[0].style:
                del self.nodes[0].style['display']

    def set_title(self, *nodes):
        self.nodes[0][0].nodes = list(nodes)

    def set_body(self, *nodes):
        self.nodes[0][1].nodes = list(nodes)


app.add_static_file('lona/style.css', """
    .popup {
        border: 2px solid grey;
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 25%;
        margin-top: 10%;
        height: 4em;
        width: 50%;
    }

    .popup .popup-title {
        font-size: 130%;
        font-weight: bold;
    }

    .popup .popup-buttons {
        float: right;
    }
""")


@app.route('/')
class MyLonaView(LonaView):
    def handle_request(self, request):
        popup = Popup()
        show_popup = Button('Show Popup', _id='show-popup')

        html = HTML(
            H1('Popup Demo'),
            show_popup,
            popup,
        )

        while True:
            input_event = self.await_click(html=html)

            if input_event.node is show_popup:
                with html.lock:
                    popup.set_title('Popup Header')
                    popup.set_body('Popup Body')
                    popup.show()

            elif input_event.node is popup.confirm_button:
                print('confirm was clicked')

                popup.hide()

            elif input_event.node is popup.cancel_button:
                print('cancel was clicked')

                popup.hide()


app.run(port=8080)

[MShekow]

Thank you for the minimal example. I would like the code to be closer to what Bootstrap originally does (to e.g. get the nice fade-animation). The snippet below still has problems: I cannot properly identify which buttons were clicked (from the self.await_click(html=html) call).

• Problem 1: events on the yes/no buttons in the dialog are only detected on the server if I explicitly add lines such as self.yes_button.events.add(CLICK) (which is not the case in your minimal example). I was under the impression that Buttons automatically have the CLICK event set(?).
• Problem 2: The reason why I add events=[CLICK] in the line anchor = A(anchor_text, href="#", events=[CLICK]) is because otherwise, if I don't add it, and the user clicks on the link, there seems to be a page switch and Lona shows the 404 error view (which I don't want at all - I want simply no page change to happen). However, after having added the events=[CLICK] the await_click returns an input event that has two nodes, the dialog, and the anchor link.

Do you have any ideas how to fix these problems?

View code:

from uuid import uuid4

from lona import LonaView
from lona.html import Widget, HTML, A, CLICK
from lona.static_files import Script


class Popup(Widget):
    STATIC_FILES = [
        # the path is always relative to the current file
        Script(name='ModalUpdater', path='modal.js'),
    ]

    def __init__(self, title: str, message: str):
        random_label = str(uuid4())
        self.nodes = HTML(f"""
            <div id="cosim-modal" class="modal fade" tabindex="-1" aria-labelledby="{random_label}" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="{random_label}">{title}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <p>{message} <span class="variable-content">will be replaced by JS</span></p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary no-btn" data-bs-dismiss="modal">No</button>
                    <button type="button" class="btn btn-primary yes-btn" data-bs-dismiss="modal">Yes</button>
                  </div>
                </div>
              </div>
            </div>
            """).nodes[0]

        self.no_button = self.query_selector('.no-btn')
        self.yes_button = self.query_selector('.yes-btn')

    @staticmethod
    def get_configured_anchor_link(anchor_text: str, job_name: str) -> A:
        anchor = A(anchor_text, href="#", events=[CLICK])
        anchor.attributes["data-bs-toggle"] = "modal"
        anchor.attributes["data-bs-target"] = "#cosim-modal"
        anchor.attributes["data-bs-itemname"] = job_name
        return anchor


class MyLonaView(LonaView):
    def handle_request(self, request):
        popup = Popup(title="Test title", message="Do you want to delete?")

        html = HTML(
            popup,
            popup.get_configured_anchor_link(anchor_text="link-text", job_name="the job")
        )

        while True:
            input_event = self.await_click(html=html)
            print(f"Input event: {input_event}")

            if input_event.node is popup.no_button:
                print('no was clicked')
            elif input_event.node is popup.yes_button:
                print('yes was clicked')

And the modal.js:

function Sleep(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}

async function fixModalDialogEventListener() {
    var appModal;
    while (true) {
        const foundAppModal = document.getElementById('cosim-modal');
        if (foundAppModal) {
            appModal = foundAppModal;
            console.log("Found modal")
            break;
        } else await Sleep(100)
    }

    appModal.addEventListener('show.bs.modal', function (event) {
        // Button that triggered the modal
        const button = event.relatedTarget;
        const itemName = button.getAttribute('data-bs-itemname');

        // Update the modal's content.
        const variableContentElement = appModal.querySelector('.variable-content');
        variableContentElement.textContent = itemName
    })

}

fixModalDialogEventListener()

[MShekow]

I also realized that with my approach, I have no idea how to access the variable piece of information once the user clicked the "Yes" button (my server code needs to know what the current item was when the user clicked Yes). I might have to use your approach, where this information is stored server-side in the Popup widget.

[fscherf]

Hi @MShekow, i published the current state of https://github.com/lona-web-org/lona-bootstrap-5 for you.

I implemented bootstrap5 modals using a Lona frontend widget (https://lona-web.org/end-user-documentation/html.html#frontend-widgets). These are little Javascript snippets that run when a Lona renders a widget. Like this i don't have to wait and sleep() until a popup gets shown.

https://github.com/lona-web-org/lona-bootstrap-5/blob/master/lona_bootstrap_5/modal.py
https://github.com/lona-web-org/lona-bootstrap-5/blob/master/lona_bootstrap_5/bootstrap5-widgets.js

To see the code in action you can read or run:
https://github.com/lona-web-org/lona-bootstrap-5/blob/master/test_script.py

Click events:
Yes you are right, when you use lona.html.Button CLICK is set by default. When a button is created by HTML() its a generic node, not lona.html.Button with the tag name button. Maybe that should be configurable, and at least better documented.

[MShekow]

Thank you very much, I'll look into it. Do you have any suggestions for Problem 2 I mentioned above, which also happens in other places (not related to modal dialogs)?

[fscherf]

Lona patches the behavior of links by default so that if you click on a link in an interactive view, a new view gets started over the websocket. You can override this by adding CLICK. That you click a view that has no CLICK and Lona tries to change views is wanted.

I tried your example and i am not completely sure if i understand your problem entirely. When i click the link "link-text" i input_event.node has only one node (the link node)

[fscherf]

@MShekow i made a simple example for you how i would write a view with a table with a delete link for each line

from lona import LonaView, LonaApp
from lona.html import HTML, A, CLICK, Table, Tr, Th, Td, H1

app = LonaApp(__file__)


@app.route('/')
class MyLonaView(LonaView):
    def handle_request(self, request):
        data = [
            ('Alice',   '423243924'),
            ('Bob',     '2121243924'),
            ('Mallory', '1223423243924'),
        ]

        # setup table
        table = Table(
            Tr(
                Th('Name'),
                Th('Phone Number'),
                Th('Delete'),
            ),
        )

        for index, data_set in enumerate(data):
            name, phone_number = data_set

            delete_link = A('Delete', href="#", events=[CLICK])

            table.append(
                Tr(
                    Td(name),
                    Td(phone_number),
                    Td(delete_link),
                    data_id=str(index),
                )
            )

        # setup html
        html = HTML(
            H1('Phone Book'),
            table,
        )

        # main loop
        while True:
            self.show(html)
            print(data)

            input_event = self.await_click()

            # here you would add confirmation popup

            tr = input_event.node.parent.parent

            # remove data_set from data
            data_id = int(tr.attributes['data-id'])
            data[data_id] = ()

            # remove tr from table
            tr.remove()


app.run(port=8080)

[MShekow]

I tried your example and i am not completely sure if i understand your problem entirely. When i click the link "link-text" i input_event.node has only one node (the link node)

Thanks for checking. The fact that I got two nodes in the await call might be related to the (weird) ways I tried to integrate the bootstrap modal. I'll test your frontend-widget approach in 2 weeks after I return from a leave-of-absence.

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.

[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

[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]

@MShekow Does this solve your problem?

[MShekow]

I looked at the example code, and it looks exactly like what I need, thank you. I'll incorporate it in the coming days and get back to you in case I run into problems.

[MShekow]

Another small issue that popped up with using the Bootstrap 5 Modal: if I add code such as the following:

self.modal.set_buttons(A("Back to start page", href="/", _class="btn btn-primary"))

for a modal initialized like this: Modal(fade=True, centered=True), then the backdrop shadow will stay when the user clicks that button. Is there any way to get rid of that shadow?

[fscherf]

@MShekow Oh that sounds like a bug. could you open a issue in https://github.com/lona-web-org/lona-bootstrap-5 ?

[MShekow]

Done, see lona-web-org/lona-bootstrap-5#1