Bokeh: Reference Select Widget in CustomJS Callback

I want to be able to reference 2 Select widgets (select1.value and select2.value) in the CustomJS callback, so I cannot use cb_obj.value.

select1 = Select(title="Level:", options=['All Levels', '1', '2', '3'], callback=callback)

First, I tried referencing its value directly within the callback:

callback = CustomJS(args=dict(source=source, ts=true_source), code="""
var f = select1.value

This resulted in error: select1 is not defined:

    Uncaught ReferenceError: select1 is not defined
    at eval (eval at get (bokeh-1.1.0.min.js:31), <anonymous>:9:11)
    at i.execute (bokeh-1.1.0.min.js:31)
    at e.change_input (bokeh-widgets-1.1.0.min.js:31)
    at e.change_input (bokeh-widgets-1.1.0.min.js:31)
    at HTMLSelectElement.<anonymous> (bokeh-widgets-1.1.0.min.js:31)

Then I tried passing select1 to the args in the callback:

 callback = CustomJS(args=dict(source=source, ts=true_source, select1=select1), code="""
    var f = select1.value

Because select1's argument is callback=callback, if I define select1 before I define callback, python is going to generate an error because callback was referenced before assignment. Vice versa if I define callback before the select widget.

So I tried this: defining select1 twice

select1 = ... (without the callback argument)
callback = ...
select1 = ... (with the callback argument)

This finally generated the bokeh chart. But when I clicked on the select widget, there is no value.

var f=select1.value;
console.log('Select1 type ' + f.constructor.name.toLowerCase()); // string, as expected
console.log('Value ' + f); // outputs 'Value ', so f is nothing
console.log('Select1 options ' + select1.options); // Output is as expected

select1.value would be not empty if I provide a default value argument to select1:

select1 = Select(title="Level:", value='1', options=['All Levels', '1', '2', '3'], callback=callback)

But then, select1.value would remain '1' no matter what I change the actual value of the widget to. So the value is not updating at all.

I appreciate the help.. thanks!

- - Source


answered 1 week ago SAKURA #1

I finally got it to work. I used js_on_change instead of adding callback as a widget argument.

In the callback function, I passed the widget names as arguments.

1) Define select widgets, necessary to specify the default value

select1 = Select(title="Level:", value='All Levels', options=['All Levels', '1', '2', '3'])
select2 = Select(...)

2) Define callback, pass widgets explicitly as arguments

callback = CustomJS(args=dict(source=source, ts=true_source, select1=select1, select2=select2), code="""
f = select1.value
g = select2.value

3) js_on_change

select1.js_on_change('value', callback)

comments powered by Disqus