How do I handle data entry in a scala.js bootstrap modal dialog? - scala.js

Question

I am using scala.js, plus the bootstrap facade, to collect some data from my user:
def showModal(kopiUser: KopiUser): Unit = {
def modal = Modal().withTitle("modal title").
withBody(
p(s"${kopiUser.displayName}, please enter your data"),
Form(
FormInput.text("fieldlabel")
)
).
withButtons(
Modal.closeButton(),
Modal.button("Submit", Modal.dismiss)
)
modal.show()
}
When the user hits "Submit", I want to get the data that was entered and do something with it.
The dialog is animated, sliding and fading in and out as per bootstrap default, so I can't just register an onClick on the button, right?
How do I do this in a nice way - i.e. preferably some kind of bootstrap/scala.js kind of way, so that I retain my type safety?
I've looked in the bootstrap/scala.js project example, but that just displays an example dialog, it doesn't do anything with the data.
I've intentionally left off the bootstrap tag from this question, I'm looking for how to solve this with scala.js (via the bootstrap facade or not), rather than just using bootstrap itself.

Answer 1

This is modified example of object TestModal from bootstrap/scala.js v1.1.1. There are certainly also other ways to do this but one solution is to move field definitions out of the apply() and out of the form.
This way you can see and use them outside the TestModal2 object.
object TestModal2 {
val modalInputValue = Var("10000000") // Better use string
val radioGroup = FormInput.radioGroup(FormInput.radio("Test1", "modal-title", "First radio"), FormInput.radio("Test2", "modal-title", "Second radio"))
val select = FormInput.simpleSelect("Plain select", "Option 1", "Option 2", "Option 3")
val multipleSelect = FormInput.simpleMultipleSelect("Multiple select", "Option 1", "Option 2", "Option 3")
val inputTextArea = FormInput.textArea("Money text area", rows := 1, modalInputValue.reactiveInput)
val selectedFile = Var("")
val inputFile = FormInput.file("Test file", onchange := Bootstrap.jsInput { input ⇒
val file = input.files.head
selectedFile.update(file.name)
window.alert(s"File selected: ${file.name}")
})
val form = Form(
FormInputGroup(FormInputGroup.label("Money"), FormInputGroup.addon("usd".fontAwesome(FontAwesome.fixedWidth)), FormInputGroup.number(modalInputValue.reactiveInput)),
radioGroup,
select,
multipleSelect,
inputTextArea,
inputFile
)
def apply()(implicit ctx: Ctx.Owner): Modal = {
Modal()
.withTitle(radioGroup.value, " / ", select.selected.map(_.head), " / ", multipleSelect.selected.map(_.mkString(" + ")))
.withBody(p("You won ", modalInputValue, "$"), p(form))
.withButtons(Modal.closeButton(), Modal.button("Take", Modal.dismiss))
}
}
If you put somewhere in the calling code e.g. this
TestModal2.modalInputValue.trigger(
println("modalInputValue = " + TestModal2.modalInputValue.now)
)
TestModal2.select.selected.trigger(
println("select = " + TestModal2.select.selected.now)
)
TestModal2.selectedFile.trigger(
println("selectedFile = " + TestModal2.selectedFile.now)
)
You see the input value changes immediately on the console when they happen on the open dialog.

Answer 2

This is the answer I was given by the maintainer of the scalajs-bootstrap project.
def showModal(kopiUser: KopiUser): Unit = {
val data = Var("")
def modal = Modal().withTitle("modal title").
withBody(
p(s"${kopiUser.displayName}, please enter your data"),
Form(
FormInput.text("fieldlabel", data.reactiveInput)
)
).
withButtons(
Modal.closeButton(),
Modal.button("Submit", Modal.dismiss, onclick := Bootstrap.jsClick { _ ⇒
// Do something with input
window.alert(data.now)
})
)
modal.show()
}
To do what I wanted (including not closing the dialog when data was not entered), I had to additionally hack up the Modal facade class so that I could register onHide, onHidden events to not close the dialog, etc.