ReactiveHTML button and mehod

Panel
1

Hi, can someone have a look at the code below and tell me why the button doesn’t fire the method? Trying to wrap my head around ReactiveHTML but struggling with it.

Also, I believe the Material UI examples in the gallery don’t work as intended currently. Had a look and the switch component is breaking it for some reason. Although, I’m sure it was working on 0.12.0 release.

import param
import panel as pn

from panel.reactive import ReactiveHTML

pn.extension()

class Butt(ReactiveHTML):

    def ttt(self, event):
        print('signal')

    _template = f"""<button type="button" onclick="${ttt}">Butt</button>"""

bb = Butt()

x = pn.Row(bb)

pn.panel(x).show()
2

I think you need to put an id in the button div and your method has to be named _id_ttt. You can check the inline callbacks section of the docs.

Screenshot_20210807-095425_Chrome
Screenshot_20210807-095425_Chrome720×1600 166 KB

3

@nghenzi
Tried to play around with the id to no prevail. I also had a look at the docs before, but still couldn’t figure it out. Checked the related examples from the gallery as well.

I’m sure it must be something extremely simple, but couldn’t get it to work yet…

4

This works for me

import panel as pn
from panel.reactive import ReactiveHTML

class btn(ReactiveHTML):
    _template = """
             <button id='button' onClick=${_button_click}>  
              Click me </button>
               """

    def _button_click(self,event):
        print ('trig')

b = btn()

pn.Row(b).servable()
5

Cheers Mate for the help!

Just to confirm, button id is not required, the same goes with using underscores.
It didn’t work for me because I was using f-string. Without the “f” it works fine.
Not sure what this means, but it works. Thanks again!

2 Likes
6

thanks for the awesome information.

1 Like
7

thanks my issue has been fixed.