Bokeh div widget, change the text by pressing a button

Question

I want a bokeh button to change the text in a div widget.

I found something similar:

https://groups.google.com/a/continuum.io/forum/#!topic/bokeh/

I tried to make this fit for my situation, as the example shown in the link was meant to change the text of the button itself:

from bokeh.models import CustomJS
from bokeh.layouts import row, column
from bokeh.models.widgets import Div, Button

op="FirstText"

Output= Div(text="""<font size="4">""" + op + """</font>""", width=200, height=20)


ChangeTextScript = """
    o1="NewText";
    //location.reload();
"""

ResponseButton = Button(label="ChangeText",callback=CustomJS(args={'o1':op},code=ChangeTextScript))

layout=(
    column(
        ResponseButton,
        Output
    )
)

output_file("ChangeText.html", title="NewText")

show(layout)

The button and the "FirstText" are getting displayed, but clicking the button does not change the text. I already found out that the java script is triggered by adding the currently commented line in java script (the page is refreshed when I clicked the button).

I also thought that I could use a " ColumnDataSource " which is used for refreshing Diagrams, but Div does not support " source=... ".

Answer 1

You need to pass the Div widget itself as argument for the callback and update its text property:

ChangeTextScript = """
    o1.text="<font size='4'>"+"NewText"+"</font>";
"""
ResponseButton = Button(label="ChangeText",callback=CustomJS(args={'o1':Output},code=ChangeTextScript))