ReactiveHTML button and mehod

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()

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.

@nghenzi2019
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…

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()

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

thanks for the awesome information.

1 Like

thanks my issue has been fixed.