Issue
I'm using a flask file (run_server.py) to alternate between index.html and home.html (code provided below).
There's an HTMX button to take me from index.html to home.html. And there's a similar button to take me from home.html to index.html.
The first time I go from index.html to home.html the embedded bokeh plot does not show. But every subsequent time I go from index.html to home.html the plot does show as I expect it to show. Why does it not show the first time?
run_server.py
from flask import Flask, render_template
from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.resources import CDN
p = figure(width=300, height=300, tools='pan,reset,save')
p.circle([1, 2.5, 3, 2], [2, 3, 1, 1.5], radius=0.3, alpha=0.5)
cscript, cdiv = components(p)
app = Flask(__name__)
@app.route('/', methods=['GET'])
def page_index():
return render_template('index.html')
@app.route('/home', methods=['GET'])
def page_home():
return render_template('home.html',
script=cscript,
div=cdiv,
resources=CDN.render())
index.html
<html>
<script src="https://unpkg.com/htmx.org@1.9.8"></script>
<body>
<p>"This is index.html"</p>
<button class='btn' hx-get="/home" hx-target="body">
Click Me!
</button>
</body>
</html>
home.html (this one has the bokeh plot)
<p>"This is home.html"</p>
<button class='btn' hx-get="/" hx-target="body">
Click Me!
</button>
<div id="bokeh_plot_1">
{{ resources | safe }}
{{ script | safe }}
{{ div | safe }}
</div>
Solution
You need to load the js cdn resources from index.html (preferably inside head tag).
Once the main resources are loaded by browser, then the htmx will handle the scripts correctly from ajax response.
Answered By - mariodev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.