Search code examples
twitter-bootstrapscalascala.jsscalatags

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

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:

toggle off toggle on

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?

Solution

  • 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