Using bootstraptoggle's onclick event in a scala-js application

Question

In my scala-js application I want to use the bootstraptoggle library to create a nice looking switch button.

So far I am creating the toggle button by a method looking somewhat like this:

import scalatags.JsDom
import scalatags.JsDom.all._
// ...


def createToggleButton(): JsDom.TypedTag[Input] = {
  def onClick = println("HELLO WORLD!")
  input(id := "myToggle",
        attr("data-toggle") := "toggle",
        `type` := "checkbox",
        onclick := onClick,
        attr("data-on") := "ON",
        attr("data-off") := "OFF",
        attr("data-onstyle") := "success",
        attr("data-width") := "85",
        attr("data-height") := "26")
}

When rendering this and adding it to my DOM it looks like this:

So far everything is working. The peculiar thing is this however: When rendering the page ('F5') my console (Chrome - 'F12') shows one 'HELLO WORLD!' output right from the start. After that, the onclick event does not seem to fire anymore.

Does anyone know how to fix this?

sjrd · Accepted Answer · 2018-09-04 15:45:53Z

2

You should give a function of the form () => action() to the attribute onclick. Currently you're evaluating the def onClick once, and storing the result of that function call (which is the () value) in the onclick attribute. Instead you should write

onclick := { () => onClick }

answered Sep 4, 2018 at 15:45

sjrd

22.2k2 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Florian Baierl Over a year ago

Unfortunatly, that does not seem to work. I tried writing onclick := { () => println("HELLO WORLD!") } but now I don't get any output. I noticed that it works with onchange := { () => println("HELLO WORLD!") } but then I will need a small work-around to distinguish if the user pressed the button or if it was changed by the API, so I would definetly prefer to use onclick.

Florian Baierl · Accepted Answer · 2018-09-05 07:50:26Z

0

Since I wasn't able to get the bootstrap-toggle to work, I decided to make my own. So, here is my solution: ToggleSwitchWithLabels.scala

answered Sep 5, 2018 at 7:50

Florian Baierl

2,4914 gold badges28 silver badges53 bronze badges

Collectives™ on Stack Overflow

Using bootstraptoggle's onclick event in a scala-js application

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related