Interaction between custom Javascript and BokehJS / Python

Hi all,

I have a problem with passing a value from javascript to Python.

When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.

This value is however not seen by Python.

To test it I created another Div (Value: ) that continuously displays the TextInput value.

This Div value changes only when I MANUALLY click and change the TextInput value.

It doen’t change when I click the dynamically created Div’s that also set that TextInput.

How is the sync between BokehJS and the Python done?

I just want to pass a value to the BokehJS and eventually to Python.

Is here any work around to make this work?

Bokeh info:

Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
IPython version : (not installed)
Tornado version : 4.5.3
Bokeh version : 1.0.4
BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
node.js version : v6.16.0
npm version : 3.10.10

``

I run the code below as follow:

bokeh serve --show main.py

``

The main.py is as follows:

from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

div1 = Div(text = ‘

Set Value: 1
’)
div2 = Div(text = ‘
Set Value: 2
’)

prefix = 'Value: ’
div_txt = Div(text = prefix)

txt = TextInput(value = “”, id = “text_input”)
layout = column(div1, div2, txt, div_txt)

def update():
div_txt.text = prefix + txt.value

curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 500)

``

Hi,

BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with

    text_input.value = "new text" // not the DOM element, the BokehJS object

BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh's CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).

Thanks,

Bryan

···

On Feb 8, 2019, at 16:49, [email protected] wrote:

Hi all,

I have a problem with passing a value from javascript to Python.
When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
This value is however not seen by Python.

To test it I created another Div (Value: ) that continuously displays the TextInput value.
This Div value changes only when I MANUALLY click and change the TextInput value.
It doen’t change when I click the dynamically created Div’s that also set that TextInput.

How is the sync between BokehJS and the Python done?
I just want to pass a value to the BokehJS and eventually to Python.
Is here any work around to make this work?

Bokeh info:
Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
IPython version : (not installed)
Tornado version : 4.5.3
Bokeh version : 1.0.4
BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
node.js version : v6.16.0
npm version : 3.10.10

I run the code below as follow:
bokeh serve --show main.py

The main.py is as follows:
from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

div1 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'1\';">Set Value: 1</div>')
div2 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'2\';">Set Value: 2</div>')

prefix = 'Value: '
div_txt = Div(text = prefix)

txt = TextInput(value = "", id = "text_input")
layout = column(div1, div2, txt, div_txt)

def update():
    div_txt.text = prefix + txt.value

curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 500)

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Bryan, Thanks. I got it.
Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:

I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.

I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.

Than one could simply use the standard jquery setters/getters ($) to obtain interaction.

This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.

Here is my modified code:

from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

def get_div(nmb):
js = “Bokeh.documents[0][’_all_models’].text_input[‘value’] = ‘{nmb}’”.format(nmb = nmb)
return(Div(text = (‘

Set Value {nmb}
’.format(js = js, nmb = nmb))))

def update():
div_txt.text = 'Value: ’ + txt.value

txt = TextInput(value = “”, id = “text_input”)
div_txt = Div(text = 'Value: ')

curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
curdoc().add_periodic_callback(update, 250)

``

···

On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:

Hi,

BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with

text_input.value = "new text" // not the DOM element, the BokehJS object

BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh’s CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).

Thanks,

Bryan

On Feb 8, 2019, at 16:49, [email protected] wrote:

Hi all,

I have a problem with passing a value from javascript to Python.

When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
This value is however not seen by Python.

To test it I created another Div (Value: ) that continuously displays the TextInput value.

This Div value changes only when I MANUALLY click and change the TextInput value.

It doen’t change when I click the dynamically created Div’s that also set that TextInput.

How is the sync between BokehJS and the Python done?

I just want to pass a value to the BokehJS and eventually to Python.

Is here any work around to make this work?

Bokeh info:

Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)

IPython version : (not installed)

Tornado version : 4.5.3

Bokeh version : 1.0.4

BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static

node.js version : v6.16.0

npm version : 3.10.10

I run the code below as follow:

bokeh serve --show main.py

The main.py is as follows:

from bokeh.models.widgets import Div, TextInput

from bokeh.layouts import column
from bokeh.io import curdoc

div1 = Div(text = ‘

Set Value: 1
’)
div2 = Div(text = ‘
Set Value: 2
’)

prefix = 'Value: ’
div_txt = Div(text = prefix)

txt = TextInput(value = “”, id = “text_input”)
layout = column(div1, div2, txt, div_txt)

def update():
div_txt.text = prefix + txt.value

curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 500)


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Tony,

That's great to hear, this kind of input and use case exploration could be very valuable. That said, you just reminded me that Bokeh.documents exists (I had forgotten about it), which means there is already essentially a way to do what you describe with public supported APIs. Instead of "id" there is also a "name" that users can set to any arbitrary value they like, and a method to retrieve models by name. Here is your code updated:

    from bokeh.models.widgets import Div, TextInput
    from bokeh.layouts import column
    from bokeh.io import curdoc

    def get_div(nmb):
        js = "Bokeh.documents[0].get_model_by_name('text_input').value = '{nmb}'".format(nmb = nmb)
        return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))

    def update():
        div_txt.text = 'Value: ' + txt.value

    txt = TextInput(value = "", name = "text_input")
    div_txt = Div(text = 'Value: ')

    curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
    curdoc().add_periodic_callback(update, 250)

I'd love to discuss how this could be made even easier/better. Certainly we could make some examples and docs around this kind of usage.

Thanks,

Bryan

···

On Feb 9, 2019, at 15:08, [email protected] wrote:

Bryan, Thanks. I got it.
Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:
I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.

I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.
Than one could simply use the standard jquery setters/getters ($) to obtain interaction.
This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.

Here is my modified code:

from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

def get_div(nmb):
    js = "Bokeh.documents[0]['_all_models'].text_input['value'] = '{nmb}'".format(nmb = nmb)
    return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))

def update():
    div_txt.text = 'Value: ' + txt.value

txt = TextInput(value = "", id = "text_input")
div_txt = Div(text = 'Value: ')

curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
curdoc().add_periodic_callback(update, 250)

On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:
Hi,

BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with

    text_input.value = "new text" // not the DOM element, the BokehJS object

BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh's CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).

Thanks,

Bryan

> On Feb 8, 2019, at 16:49, [email protected] wrote:
>
> Hi all,
>
> I have a problem with passing a value from javascript to Python.
> When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
> This value is however not seen by Python.
>
> To test it I created another Div (Value: ) that continuously displays the TextInput value.
> This Div value changes only when I MANUALLY click and change the TextInput value.
> It doen’t change when I click the dynamically created Div’s that also set that TextInput.
>
> How is the sync between BokehJS and the Python done?
> I just want to pass a value to the BokehJS and eventually to Python.
> Is here any work around to make this work?
>
> Bokeh info:
> Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
> IPython version : (not installed)
> Tornado version : 4.5.3
> Bokeh version : 1.0.4
> BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
> node.js version : v6.16.0
> npm version : 3.10.10
>
> I run the code below as follow:
> bokeh serve --show main.py
>
> The main.py is as follows:
> from bokeh.models.widgets import Div, TextInput
> from bokeh.layouts import column
> from bokeh.io import curdoc
>
> div1 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'1\';">Set Value: 1</div>')
> div2 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'2\';">Set Value: 2</div>')
>
> prefix = 'Value: '
> div_txt = Div(text = prefix)
>
> txt = TextInput(value = "", id = "text_input")
> layout = column(div1, div2, txt, div_txt)
>
> def update():
> div_txt.text = prefix + txt.value
>
> curdoc().add_root(layout)
> curdoc().add_periodic_callback(update, 500)
>
>
>
>
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> To post to this group, send email to [email protected].
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/57a24003-dd8b-418f-956c-40692cf16a66%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Bryan,

Nice to see there is already a method for this. Sure we could extend existing documentation with some usage examples.

However, I did some checks and it seems that “id” and “name” provided in Python code as attribute is not always being populated to the HTML (but it can always be found in generated JS on the page).

Where you look in JSON Prototype of en element it seems it should be supported but in most cases it is not.

I have made a list of a few elements i checked.

Is this a bug? Can we expect it will be fixed in the next release?

Screen Shot 2019-02-11 at 01.04.37.pngScreen Shot 2019-02-10 at 23.49.01.png

···

On Sunday, February 10, 2019 at 12:08:35 AM UTC+1, Bryan Van de ven wrote:

Hi Tony,

That’s great to hear, this kind of input and use case exploration could be very valuable. That said, you just reminded me that Bokeh.documents exists (I had forgotten about it), which means there is already essentially a way to do what you describe with public supported APIs. Instead of “id” there is also a “name” that users can set to any arbitrary value they like, and a method to retrieve models by name. Here is your code updated:

from bokeh.models.widgets import Div, TextInput

from bokeh.layouts import column

from [bokeh.io](http://bokeh.io) import curdoc



def get_div(nmb):

    js = "Bokeh.documents[0].get_model_by_name('text_input').value = '{nmb}'".format(nmb = nmb)

    return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))



def update():

    div_txt.text = 'Value: ' + txt.value



txt = TextInput(value = "", name = "text_input")

div_txt = Div(text = 'Value: ')



curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))

curdoc().add_periodic_callback(update, 250)

I’d love to discuss how this could be made even easier/better. Certainly we could make some examples and docs around this kind of usage.

Thanks,

Bryan

On Feb 9, 2019, at 15:08, [email protected] wrote:

Bryan, Thanks. I got it.

Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:

I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.

I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.

Than one could simply use the standard jquery setters/getters ($) to obtain interaction.
This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.

Here is my modified code:

from bokeh.models.widgets import Div, TextInput

from bokeh.layouts import column

from bokeh.io import curdoc

def get_div(nmb):

js = "Bokeh.documents[0]['_all_models'].text_input['value'] = '{nmb}'".format(nmb = nmb)
return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))

def update():

div_txt.text = 'Value: ' + txt.value

txt = TextInput(value = “”, id = “text_input”)

div_txt = Div(text = 'Value: ')

curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))

curdoc().add_periodic_callback(update, 250)

On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:

Hi,

BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with

text_input.value = "new text" // not the DOM element, the BokehJS object

BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh’s CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).

Thanks,

Bryan

On Feb 8, 2019, at 16:49, [email protected] wrote:

Hi all,

I have a problem with passing a value from javascript to Python.
When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
This value is however not seen by Python.

To test it I created another Div (Value: ) that continuously displays the TextInput value.
This Div value changes only when I MANUALLY click and change the TextInput value.
It doen’t change when I click the dynamically created Div’s that also set that TextInput.

How is the sync between BokehJS and the Python done?
I just want to pass a value to the BokehJS and eventually to Python.
Is here any work around to make this work?

Bokeh info:
Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
IPython version : (not installed)
Tornado version : 4.5.3
Bokeh version : 1.0.4
BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
node.js version : v6.16.0
npm version : 3.10.10

I run the code below as follow:
bokeh serve --show main.py

The main.py is as follows:
from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

div1 = Div(text = ‘

Set Value: 1
’)
div2 = Div(text = ‘
Set Value: 2
’)

prefix = 'Value: ’
div_txt = Div(text = prefix)

txt = TextInput(value = “”, id = “text_input”)
layout = column(div1, div2, txt, div_txt)

def update():
div_txt.text = prefix + txt.value

curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 500)


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/57a24003-dd8b-418f-956c-40692cf16a66%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Tony,

Just to clarify, the name property is something that belongs to the BokehJS model object. When you search based on the name, it returns a BokehJS model object (not a DOM element). AFAIK the name value is not stored on any DOM element, tho it seems like that would not be hard to do, if it is useful. I'd like to stress though, that updating a DOM element directly, instead of updating the BokehJS model object that backs it, will circumvent all the machinery that keeps the Python and JS objects in sync. So, I am not entirely sure adding it to the DOM would be useful, at least not for setting the values (but reading values or styling would be simpler, I imagine, so it does seem reasonable to think about)

As for timing, the next release is intended to be in a week or so, so I am not sure about getting it in 1.1 unless a PR shows up early this week. Otherwise, we can cut releases fairly easily/quickly so a 1.1.1 could follow on quite soon.

Thanks,

Bryan

···

On Feb 10, 2019, at 16:12, [email protected] wrote:

Hi Bryan,

Nice to see there is already a method for this. Sure we could extend existing documentation with some usage examples.
However, I did some checks and it seems that "id" and "name" provided in Python code as attribute is not always being populated to the HTML (but it can always be found in generated JS on the page).
Where you look in JSON Prototype of en element it seems it should be supported but in most cases it is not.
I have made a list of a few elements i checked.
Is this a bug? Can we expect it will be fixed in the next release?

<Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>

On Sunday, February 10, 2019 at 12:08:35 AM UTC+1, Bryan Van de ven wrote:
Hi Tony,

That's great to hear, this kind of input and use case exploration could be very valuable. That said, you just reminded me that Bokeh.documents exists (I had forgotten about it), which means there is already essentially a way to do what you describe with public supported APIs. Instead of "id" there is also a "name" that users can set to any arbitrary value they like, and a method to retrieve models by name. Here is your code updated:

    from bokeh.models.widgets import Div, TextInput
    from bokeh.layouts import column
    from bokeh.io import curdoc

    def get_div(nmb):
        js = "Bokeh.documents[0].get_model_by_name('text_input').value = '{nmb}'".format(nmb = nmb)
        return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))

    def update():
        div_txt.text = 'Value: ' + txt.value

    txt = TextInput(value = "", name = "text_input")
    div_txt = Div(text = 'Value: ')

    curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
    curdoc().add_periodic_callback(update, 250)

I'd love to discuss how this could be made even easier/better. Certainly we could make some examples and docs around this kind of usage.

Thanks,

Bryan

> On Feb 9, 2019, at 15:08, [email protected] wrote:
>
> Bryan, Thanks. I got it.
> Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:
> I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.
>
> I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.
> Than one could simply use the standard jquery setters/getters ($) to obtain interaction.
> This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.
>
> Here is my modified code:
>
> from bokeh.models.widgets import Div, TextInput
> from bokeh.layouts import column
> from bokeh.io import curdoc
>
> def get_div(nmb):
> js = "Bokeh.documents[0]['_all_models'].text_input['value'] = '{nmb}'".format(nmb = nmb)
> return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))
>
> def update():
> div_txt.text = 'Value: ' + txt.value
>
> txt = TextInput(value = "", id = "text_input")
> div_txt = Div(text = 'Value: ')
>
> curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
> curdoc().add_periodic_callback(update, 250)
>
>
>
> On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:
> Hi,
>
> BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with
>
> text_input.value = "new text" // not the DOM element, the BokehJS object
>
> BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh's CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).
>
> Thanks,
>
> Bryan
>
> > On Feb 8, 2019, at 16:49, [email protected] wrote:
> >
> > Hi all,
> >
> > I have a problem with passing a value from javascript to Python.
> > When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
> > This value is however not seen by Python.
> >
> > To test it I created another Div (Value: ) that continuously displays the TextInput value.
> > This Div value changes only when I MANUALLY click and change the TextInput value.
> > It doen’t change when I click the dynamically created Div’s that also set that TextInput.
> >
> > How is the sync between BokehJS and the Python done?
> > I just want to pass a value to the BokehJS and eventually to Python.
> > Is here any work around to make this work?
> >
> > Bokeh info:
> > Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
> > IPython version : (not installed)
> > Tornado version : 4.5.3
> > Bokeh version : 1.0.4
> > BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
> > node.js version : v6.16.0
> > npm version : 3.10.10
> >
> > I run the code below as follow:
> > bokeh serve --show main.py
> >
> > The main.py is as follows:
> > from bokeh.models.widgets import Div, TextInput
> > from bokeh.layouts import column
> > from bokeh.io import curdoc
> >
> > div1 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'1\';">Set Value: 1</div>')
> > div2 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'2\';">Set Value: 2</div>')
> >
> > prefix = 'Value: '
> > div_txt = Div(text = prefix)
> >
> > txt = TextInput(value = "", id = "text_input")
> > layout = column(div1, div2, txt, div_txt)
> >
> > def update():
> > div_txt.text = prefix + txt.value
> >
> > curdoc().add_root(layout)
> > curdoc().add_periodic_callback(update, 500)
> >
> >
> >
> >
> >
> >
> > --
> > You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> > To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> > To post to this group, send email to [email protected].
> > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
> > For more options, visit https://groups.google.com/a/continuum.io/d/optout.
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> To post to this group, send email to [email protected].
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/57a24003-dd8b-418f-956c-40692cf16a66%40continuum.io.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9cf1f0f0-4be4-44cf-8050-c6c1cb739fd5%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
<Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>

Of course. Now I see: the JSON Property defines just BokehJS element structure. All it’s about is the interaction between JS and BokehJS and than the Python model will be adjusted accordingly.
I was on the wrong side focusing on the DOM and HTML (it was rather intuitive action and because I use often jquery to get/set values in the DOM).
And you are absolutely right that manipulating element values outside BokehJS model would mess up the things, so it is not recommended (however dynamic element styling could be useful… :).
So the get_model_by_name() should fulfil my needs. I will try it on other elements than TextInput.

Thanks

···

On Monday, February 11, 2019 at 1:57:49 AM UTC+1, Bryan Van de ven wrote:

Hi Tony,

Just to clarify, the name property is something that belongs to the BokehJS model object. When you search based on the name, it returns a BokehJS model object (not a DOM element). AFAIK the name value is not stored on any DOM element, tho it seems like that would not be hard to do, if it is useful. I’d like to stress though, that updating a DOM element directly, instead of updating the BokehJS model object that backs it, will circumvent all the machinery that keeps the Python and JS objects in sync. So, I am not entirely sure adding it to the DOM would be useful, at least not for setting the values (but reading values or styling would be simpler, I imagine, so it does seem reasonable to think about)

As for timing, the next release is intended to be in a week or so, so I am not sure about getting it in 1.1 unless a PR shows up early this week. Otherwise, we can cut releases fairly easily/quickly so a 1.1.1 could follow on quite soon.

Thanks,

Bryan

On Feb 10, 2019, at 16:12, [email protected] wrote:

Hi Bryan,

Nice to see there is already a method for this. Sure we could extend existing documentation with some usage examples.

However, I did some checks and it seems that “id” and “name” provided in Python code as attribute is not always being populated to the HTML (but it can always be found in generated JS on the page).

Where you look in JSON Prototype of en element it seems it should be supported but in most cases it is not.

I have made a list of a few elements i checked.

Is this a bug? Can we expect it will be fixed in the next release?

<Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>

On Sunday, February 10, 2019 at 12:08:35 AM UTC+1, Bryan Van de ven wrote:

Hi Tony,

That’s great to hear, this kind of input and use case exploration could be very valuable. That said, you just reminded me that Bokeh.documents exists (I had forgotten about it), which means there is already essentially a way to do what you describe with public supported APIs. Instead of “id” there is also a “name” that users can set to any arbitrary value they like, and a method to retrieve models by name. Here is your code updated:

from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from [bokeh.io](http://bokeh.io) import curdoc

def get_div(nmb):
    js = "Bokeh.documents[0].get_model_by_name('text_input').value = '{nmb}'".format(nmb = nmb)
    return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))

def update():
    div_txt.text = 'Value: ' + txt.value

txt = TextInput(value = "", name = "text_input")
div_txt = Div(text = 'Value: ')

curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
curdoc().add_periodic_callback(update, 250)

I’d love to discuss how this could be made even easier/better. Certainly we could make some examples and docs around this kind of usage.

Thanks,

Bryan

On Feb 9, 2019, at 15:08, [email protected] wrote:

Bryan, Thanks. I got it.
Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:
I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.

I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.
Than one could simply use the standard jquery setters/getters ($) to obtain interaction.
This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.

Here is my modified code:

from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

def get_div(nmb):
js = “Bokeh.documents[0][’_all_models’].text_input[‘value’] = ‘{nmb}’”.format(nmb = nmb)
return(Div(text = (‘

Set Value {nmb}
’.format(js = js, nmb = nmb))))

def update():
div_txt.text = 'Value: ’ + txt.value

txt = TextInput(value = “”, id = “text_input”)
div_txt = Div(text = 'Value: ')

curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
curdoc().add_periodic_callback(update, 250)

On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:
Hi,

BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with

text_input.value = "new text" // not the DOM element, the BokehJS object

BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh’s CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).

Thanks,

Bryan

On Feb 8, 2019, at 16:49, [email protected] wrote:

Hi all,

I have a problem with passing a value from javascript to Python.
When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
This value is however not seen by Python.

To test it I created another Div (Value: ) that continuously displays the TextInput value.
This Div value changes only when I MANUALLY click and change the TextInput value.
It doen’t change when I click the dynamically created Div’s that also set that TextInput.

How is the sync between BokehJS and the Python done?
I just want to pass a value to the BokehJS and eventually to Python.
Is here any work around to make this work?

Bokeh info:
Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
IPython version : (not installed)
Tornado version : 4.5.3
Bokeh version : 1.0.4
BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
node.js version : v6.16.0
npm version : 3.10.10

I run the code below as follow:
bokeh serve --show main.py

The main.py is as follows:
from bokeh.models.widgets import Div, TextInput
from bokeh.layouts import column
from bokeh.io import curdoc

div1 = Div(text = ‘

Set Value: 1
’)
div2 = Div(text = ‘
Set Value: 2
’)

prefix = 'Value: ’
div_txt = Div(text = prefix)

txt = TextInput(value = “”, id = “text_input”)
layout = column(div1, div2, txt, div_txt)

def update():
div_txt.text = prefix + txt.value

curdoc().add_root(layout)
curdoc().add_periodic_callback(update, 500)


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/57a24003-dd8b-418f-956c-40692cf16a66%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9cf1f0f0-4be4-44cf-8050-c6c1cb739fd5%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

<Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>

Yep, spot on! FWIW I think adding a "bokeh-name" attr to the DOM element is not unreasonable, and would happily consider a PR for it, but agree for your use case it should not be necessary.

Thanks,

Bryan

···

On Feb 11, 2019, at 02:40, [email protected] wrote:

Of course. Now I see: the JSON Property defines just BokehJS element structure. All it's about is the interaction between JS and BokehJS and than the Python model will be adjusted accordingly.
I was on the wrong side focusing on the DOM and HTML (it was rather intuitive action and because I use often jquery to get/set values in the DOM).
And you are absolutely right that manipulating element values outside BokehJS model would mess up the things, so it is not recommended (however dynamic element styling could be useful... :).
So the get_model_by_name() should fulfil my needs. I will try it on other elements than TextInput.
Thanks

On Monday, February 11, 2019 at 1:57:49 AM UTC+1, Bryan Van de ven wrote:
Hi Tony,

Just to clarify, the name property is something that belongs to the BokehJS model object. When you search based on the name, it returns a BokehJS model object (not a DOM element). AFAIK the name value is not stored on any DOM element, tho it seems like that would not be hard to do, if it is useful. I'd like to stress though, that updating a DOM element directly, instead of updating the BokehJS model object that backs it, will circumvent all the machinery that keeps the Python and JS objects in sync. So, I am not entirely sure adding it to the DOM would be useful, at least not for setting the values (but reading values or styling would be simpler, I imagine, so it does seem reasonable to think about)

As for timing, the next release is intended to be in a week or so, so I am not sure about getting it in 1.1 unless a PR shows up early this week. Otherwise, we can cut releases fairly easily/quickly so a 1.1.1 could follow on quite soon.

Thanks,

Bryan

> On Feb 10, 2019, at 16:12, [email protected] wrote:
>
> Hi Bryan,
>
> Nice to see there is already a method for this. Sure we could extend existing documentation with some usage examples.
> However, I did some checks and it seems that "id" and "name" provided in Python code as attribute is not always being populated to the HTML (but it can always be found in generated JS on the page).
> Where you look in JSON Prototype of en element it seems it should be supported but in most cases it is not.
> I have made a list of a few elements i checked.
> Is this a bug? Can we expect it will be fixed in the next release?
>
> <Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>
>
>
>
> On Sunday, February 10, 2019 at 12:08:35 AM UTC+1, Bryan Van de ven wrote:
> Hi Tony,
>
> That's great to hear, this kind of input and use case exploration could be very valuable. That said, you just reminded me that Bokeh.documents exists (I had forgotten about it), which means there is already essentially a way to do what you describe with public supported APIs. Instead of "id" there is also a "name" that users can set to any arbitrary value they like, and a method to retrieve models by name. Here is your code updated:
>
> from bokeh.models.widgets import Div, TextInput
> from bokeh.layouts import column
> from bokeh.io import curdoc
>
> def get_div(nmb):
> js = "Bokeh.documents[0].get_model_by_name('text_input').value = '{nmb}'".format(nmb = nmb)
> return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))
>
> def update():
> div_txt.text = 'Value: ' + txt.value
>
> txt = TextInput(value = "", name = "text_input")
> div_txt = Div(text = 'Value: ')
>
> curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
> curdoc().add_periodic_callback(update, 250)
>
> I'd love to discuss how this could be made even easier/better. Certainly we could make some examples and docs around this kind of usage.
>
> Thanks,
>
> Bryan
>
>
> > On Feb 9, 2019, at 15:08, [email protected] wrote:
> >
> > Bryan, Thanks. I got it.
> > Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:
> > I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.
> >
> > I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.
> > Than one could simply use the standard jquery setters/getters ($) to obtain interaction.
> > This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.
> >
> > Here is my modified code:
> >
> > from bokeh.models.widgets import Div, TextInput
> > from bokeh.layouts import column
> > from bokeh.io import curdoc
> >
> > def get_div(nmb):
> > js = "Bokeh.documents[0]['_all_models'].text_input['value'] = '{nmb}'".format(nmb = nmb)
> > return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))
> >
> > def update():
> > div_txt.text = 'Value: ' + txt.value
> >
> > txt = TextInput(value = "", id = "text_input")
> > div_txt = Div(text = 'Value: ')
> >
> > curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
> > curdoc().add_periodic_callback(update, 250)
> >
> >
> >
> > On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:
> > Hi,
> >
> > BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with
> >
> > text_input.value = "new text" // not the DOM element, the BokehJS object
> >
> > BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh's CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).
> >
> > Thanks,
> >
> > Bryan
> >
> > > On Feb 8, 2019, at 16:49, [email protected] wrote:
> > >
> > > Hi all,
> > >
> > > I have a problem with passing a value from javascript to Python.
> > > When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
> > > This value is however not seen by Python.
> > >
> > > To test it I created another Div (Value: ) that continuously displays the TextInput value.
> > > This Div value changes only when I MANUALLY click and change the TextInput value.
> > > It doen’t change when I click the dynamically created Div’s that also set that TextInput.
> > >
> > > How is the sync between BokehJS and the Python done?
> > > I just want to pass a value to the BokehJS and eventually to Python.
> > > Is here any work around to make this work?
> > >
> > > Bokeh info:
> > > Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
> > > IPython version : (not installed)
> > > Tornado version : 4.5.3
> > > Bokeh version : 1.0.4
> > > BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
> > > node.js version : v6.16.0
> > > npm version : 3.10.10
> > >
> > > I run the code below as follow:
> > > bokeh serve --show main.py
> > >
> > > The main.py is as follows:
> > > from bokeh.models.widgets import Div, TextInput
> > > from bokeh.layouts import column
> > > from bokeh.io import curdoc
> > >
> > > div1 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'1\';">Set Value: 1</div>')
> > > div2 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'2\';">Set Value: 2</div>')
> > >
> > > prefix = 'Value: '
> > > div_txt = Div(text = prefix)
> > >
> > > txt = TextInput(value = "", id = "text_input")
> > > layout = column(div1, div2, txt, div_txt)
> > >
> > > def update():
> > > div_txt.text = prefix + txt.value
> > >
> > > curdoc().add_root(layout)
> > > curdoc().add_periodic_callback(update, 500)
> > >
> > >
> > >
> > >
> > >
> > >
> > > --
> > > You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> > > To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> > > To post to this group, send email to [email protected].
> > > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
> > > For more options, visit https://groups.google.com/a/continuum.io/d/optout.
> >
> >
> > --
> > You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> > To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> > To post to this group, send email to [email protected].
> > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/57a24003-dd8b-418f-956c-40692cf16a66%40continuum.io.
> > For more options, visit https://groups.google.com/a/continuum.io/d/optout.
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> To post to this group, send email to [email protected].
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9cf1f0f0-4be4-44cf-8050-c6c1cb739fd5%40continuum.io.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout.
> <Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f2a52184-109e-487d-8293-383f7d56b19b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Also, as an aside, thank you for all the recent help on the mailing list!

Thanks,

Bryan

···

On Feb 11, 2019, at 02:40, [email protected] wrote:

Of course. Now I see: the JSON Property defines just BokehJS element structure. All it's about is the interaction between JS and BokehJS and than the Python model will be adjusted accordingly.
I was on the wrong side focusing on the DOM and HTML (it was rather intuitive action and because I use often jquery to get/set values in the DOM).
And you are absolutely right that manipulating element values outside BokehJS model would mess up the things, so it is not recommended (however dynamic element styling could be useful... :).
So the get_model_by_name() should fulfil my needs. I will try it on other elements than TextInput.
Thanks

On Monday, February 11, 2019 at 1:57:49 AM UTC+1, Bryan Van de ven wrote:
Hi Tony,

Just to clarify, the name property is something that belongs to the BokehJS model object. When you search based on the name, it returns a BokehJS model object (not a DOM element). AFAIK the name value is not stored on any DOM element, tho it seems like that would not be hard to do, if it is useful. I'd like to stress though, that updating a DOM element directly, instead of updating the BokehJS model object that backs it, will circumvent all the machinery that keeps the Python and JS objects in sync. So, I am not entirely sure adding it to the DOM would be useful, at least not for setting the values (but reading values or styling would be simpler, I imagine, so it does seem reasonable to think about)

As for timing, the next release is intended to be in a week or so, so I am not sure about getting it in 1.1 unless a PR shows up early this week. Otherwise, we can cut releases fairly easily/quickly so a 1.1.1 could follow on quite soon.

Thanks,

Bryan

> On Feb 10, 2019, at 16:12, [email protected] wrote:
>
> Hi Bryan,
>
> Nice to see there is already a method for this. Sure we could extend existing documentation with some usage examples.
> However, I did some checks and it seems that "id" and "name" provided in Python code as attribute is not always being populated to the HTML (but it can always be found in generated JS on the page).
> Where you look in JSON Prototype of en element it seems it should be supported but in most cases it is not.
> I have made a list of a few elements i checked.
> Is this a bug? Can we expect it will be fixed in the next release?
>
> <Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>
>
>
>
> On Sunday, February 10, 2019 at 12:08:35 AM UTC+1, Bryan Van de ven wrote:
> Hi Tony,
>
> That's great to hear, this kind of input and use case exploration could be very valuable. That said, you just reminded me that Bokeh.documents exists (I had forgotten about it), which means there is already essentially a way to do what you describe with public supported APIs. Instead of "id" there is also a "name" that users can set to any arbitrary value they like, and a method to retrieve models by name. Here is your code updated:
>
> from bokeh.models.widgets import Div, TextInput
> from bokeh.layouts import column
> from bokeh.io import curdoc
>
> def get_div(nmb):
> js = "Bokeh.documents[0].get_model_by_name('text_input').value = '{nmb}'".format(nmb = nmb)
> return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))
>
> def update():
> div_txt.text = 'Value: ' + txt.value
>
> txt = TextInput(value = "", name = "text_input")
> div_txt = Div(text = 'Value: ')
>
> curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
> curdoc().add_periodic_callback(update, 250)
>
> I'd love to discuss how this could be made even easier/better. Certainly we could make some examples and docs around this kind of usage.
>
> Thanks,
>
> Bryan
>
>
> > On Feb 9, 2019, at 15:08, [email protected] wrote:
> >
> > Bryan, Thanks. I got it.
> > Sure, I am open for contribution to improvements in my so called “hobby time” :slight_smile:
> > I think Bokeh has future and interaction with custom/3rd party JS packages, build with webpack or tsc (typescript) would be a great added value.
> >
> > I think a good starting point would be to let the user to set a global DOM element “id” (like now the auto-generated one e.g. “490ad07e-7ad1-4e6c-ab28-205e3385875e”) per widget on Python level.
> > Than one could simply use the standard jquery setters/getters ($) to obtain interaction.
> > This could help building e.g. SPA that communicates with database (mongo, sql) via AJAX and displas the data.
> >
> > Here is my modified code:
> >
> > from bokeh.models.widgets import Div, TextInput
> > from bokeh.layouts import column
> > from bokeh.io import curdoc
> >
> > def get_div(nmb):
> > js = "Bokeh.documents[0]['_all_models'].text_input['value'] = '{nmb}'".format(nmb = nmb)
> > return(Div(text = ('<div style="cursor:pointer" onclick="{js}">Set Value {nmb}</div>'.format(js = js, nmb = nmb))))
> >
> > def update():
> > div_txt.text = 'Value: ' + txt.value
> >
> > txt = TextInput(value = "", id = "text_input")
> > div_txt = Div(text = 'Value: ')
> >
> > curdoc().add_root(column(get_div(1), get_div(2), txt, div_txt))
> > curdoc().add_periodic_callback(update, 250)
> >
> >
> >
> > On Saturday, February 9, 2019 at 1:53:19 AM UTC+1, Bryan Van de ven wrote:
> > Hi,
> >
> > BokehJS is only able to notice (and hence, automatically sync to Python) if you set the property on the actual BokehJS object, i.e. with
> >
> > text_input.value = "new text" // not the DOM element, the BokehJS object
> >
> > BokehJS is not able to detect pure DOM changes like the one you are making. Unfortunately, it will be trivial to get ahold of the object outside of Bokeh's CustomJS callbacks. There is a global Bokeh.index that has all of the view objects. You will just have to root around that to find the text input view you want, and then set its .model.value to update. This is not a commonly used or requested kind of interaction with bokeh, so it is not highly developed. but we would certainly be receptive to suggestions motivated by real use cases (and especially if you can help with implementing improvements).
> >
> > Thanks,
> >
> > Bryan
> >
> > > On Feb 8, 2019, at 16:49, [email protected] wrote:
> > >
> > > Hi all,
> > >
> > > I have a problem with passing a value from javascript to Python.
> > > When I click a dynamically created Div (Set value: 1, 2) it sets a value in the TextInput.
> > > This value is however not seen by Python.
> > >
> > > To test it I created another Div (Value: ) that continuously displays the TextInput value.
> > > This Div value changes only when I MANUALLY click and change the TextInput value.
> > > It doen’t change when I click the dynamically created Div’s that also set that TextInput.
> > >
> > > How is the sync between BokehJS and the Python done?
> > > I just want to pass a value to the BokehJS and eventually to Python.
> > > Is here any work around to make this work?
> > >
> > > Bokeh info:
> > > Python version : 3.5.1 (default, Feb 1 2019, 21:29:47)
> > > IPython version : (not installed)
> > > Tornado version : 4.5.3
> > > Bokeh version : 1.0.4
> > > BokehJS static path : /usr/local/lib/python3.5/site-packages/bokeh/server/static
> > > node.js version : v6.16.0
> > > npm version : 3.10.10
> > >
> > > I run the code below as follow:
> > > bokeh serve --show main.py
> > >
> > > The main.py is as follows:
> > > from bokeh.models.widgets import Div, TextInput
> > > from bokeh.layouts import column
> > > from bokeh.io import curdoc
> > >
> > > div1 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'1\';">Set Value: 1</div>')
> > > div2 = Div(text = '<div style="cursor:pointer" onclick="text_input=document.getElementById(\'text_input\');text_input.value=\'2\';">Set Value: 2</div>')
> > >
> > > prefix = 'Value: '
> > > div_txt = Div(text = prefix)
> > >
> > > txt = TextInput(value = "", id = "text_input")
> > > layout = column(div1, div2, txt, div_txt)
> > >
> > > def update():
> > > div_txt.text = prefix + txt.value
> > >
> > > curdoc().add_root(layout)
> > > curdoc().add_periodic_callback(update, 500)
> > >
> > >
> > >
> > >
> > >
> > >
> > > --
> > > You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> > > To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> > > To post to this group, send email to [email protected].
> > > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/2f32354a-2725-4ec4-a231-bfa284de5463%40continuum.io.
> > > For more options, visit https://groups.google.com/a/continuum.io/d/optout.
> >
> >
> > --
> > You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> > To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> > To post to this group, send email to [email protected].
> > To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/57a24003-dd8b-418f-956c-40692cf16a66%40continuum.io.
> > For more options, visit https://groups.google.com/a/continuum.io/d/optout.
>
>
> --
> You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
> To post to this group, send email to [email protected].
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/9cf1f0f0-4be4-44cf-8050-c6c1cb739fd5%40continuum.io.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout.
> <Screen Shot 2019-02-11 at 01.04.37.png><Screen Shot 2019-02-10 at 23.49.01.png>

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/f2a52184-109e-487d-8293-383f7d56b19b%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

With version 2.1.0, something I was doing that follows this thread (and a few others) no longer works, and I think I understand how to achieve the same result, and I thought I would post here in case this helps someone else.

First, this is what I was doing, where name was a name I assigned as a css,

var el = bokeh.model.document._all_models_by_name._dict[name];

But _all_models_by_name no longer exists in 2.1.0.

The new solution is to use,

var el = bokeh.model.document.get_model_by_name(name);

The rest of my code seems to work with just this change.

Note that I am also going to use the name= arg on creating a bokeh element and drop using the css approach I was using.