Allow calling ui.add_head_html after page has been sent to the client

[retsyo]

Question

This is a weird question.

1. the simple and working one

we know that this code will pop up an alert window if we press the red button

from nicegui import Client, app, ui

if 1:
    srcGenPDF = r"""
<script type="text/javascript">
function generatePDF() {
        alert('hello');
      }
</script>
    """
    ui.add_head_html(srcGenPDF)

    ui.button("button can fire function", color='red').props(''' onclick="generatePDF()" ''')

ui.button('click')

ui.run()

2. but this one will not fire generatePDF function

In fact, if I do some inspect I find that browser says Uncaught ReferenceError: generatePDF is not defined

from nicegui import Client, app, ui

def fn():
    srcGenPDF = r"""
<script type="text/javascript">
function generatePDF() {
        alert('hello');
      }
</script>
    """
    ui.add_head_html(srcGenPDF)

    ui.button("button can't fire function", color='red').props(''' onclick="generatePDF()" ''')

ui.button('click', on_click=fn)

ui.run()

No, I can't remove srcGenPDF and ui.add_head_html(srcGenPDF) out of the function fn. Because I will generate new PDF filename for every client according to his username in javascript function generatePDF, which is calculated in the python function fn, as you may guess. Above is just a simplified version of my code. Here is the document on the html and javascript code part in case you need to refer.

3. So how to fix this problem by no moving srcGenPDF out of fn?

Thanks

[falkoschindler]

This is a current limitation of ui.add_head_html and ui.add_body_html. You can't add HTML to the head or body tag after the page has been sent to the client. Just yesterday we added a check to raise a RuntimeError in case these functions are called too late: a09e713#diff-82cf4aea1723daefc024a893dba29e8695a5135233715afe381030f61c6eb5fe

But it might be possible to extend the implementation such that the HTML is sent to the client via websocket. I'll convert the discussion to a feature request.

[retsyo]

Thanks. I am looking forward to the implementation which then makes my code feasible. Well, the follow code is still an abstract of the real one

@ui.page('/')
async def exportPDF():
    "export PDF from current client's webpage. The filename is friendly username.pdf"

    NAME = app.storage.user["username"]
    fnPdf = f'{NAME}.pdf'

    srcJSGenPDF = r"""
<script type="text/javascript">
function generatePDF() {
... filename:     '""" + fnPdf + r"""',  // please note we use every client's name to generate JS code
      }
</script>
"""
    ui.add_head_html(srcJSGenPDF)

    ui.button("button can't fire function", color='red').props(''' onclick="generatePDF()" ''')

[falkoschindler]

I started to implement this feature in PR #2191.

[falkoschindler]

PR #2191 has been released in version 1.4.9.