I want to wait until pyscript has fully loaded all packages and after that alter an element on the DOM.
I tried using window.addEventListener('load', create_proxy(func)) in pyscript. But to no avail, it does not execute the function. I also tried adding the event listener 'change' to the element that is being modified by pyscript. The element is used for inserting a table using the panel package. After the table is inserted I’d like to remove another element on the page.
Any help appreciated
Advertisement
Answer
The basic way is to use pyscript.write().
<html>
<head>
<title>Pyscript - Test</title>
<!-- Load required PyScript packages -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"onerror=scriptLoadFailure('pyscr ipt.js')></script>
<py-env>
- pandas
</py-env>
</head>
<!-- ------------------------------------------------------------------- -->
<body>
<py-script>
import pandas as pd
def do_it():
df = pd.DataFrame([[12, 14, 10, 11, 1], [22, 24, 20, 21, 0]])
pyscript.write('output', df)
pyscript.write('msg', 'That should be it')
do_it()
</py-script>
<header id="header_top">Pyscript - Test</header>
<div id="main1">
<div id="output">
Testing div with id="output"
</div>
<div id="msg"></div>
</div>
</body>
<!-- ------------------------------------------------------------------- -->
</html>
While loading the content of the paage is
Pyscript – Test
Testing div with id=”output”
After loading has finished there is a pandas df in the output div and additional text in a separate div with id=”msg”
“That should be it” Regards…
