Mixing javascript with kotlin html dsl

Web Development
1

Hi, I have a form created using kotlin html dsl. Inside the form there’s a combo box that is populated using dataList. When a user click one of the combo box value. I want to fetch the data from the server and populate the price field.

the html dsl have onClick and onChange attributes, but it only receive string parameter. While kotlin js have onClickFunction that accept lambda as argument. But I’m still a bit confused how to mix the dsl with kotlin js. Since this is not a kotlin js project. Any guidance?

Thanks

    form("/order/product/${order.id}/add", method = FormMethod.post, classes = "form-signin") {

        input(InputType.text, name = "product", classes = "form-control") {
            list = "productList"
            required = true
            placeholder = "product"
            dataList {
                id = "productList"

                products.forEach {
                    option {
                        value = it.name
                    }
                }
            }
        }

        input(InputType.text, name = "price", classes = "form-control") {
            required = true
            placeholder = "price"
        }


        input(InputType.submit, classes = "btn btn-lg btn-primary btn-block") { value = "Save" }

    }
2

After digging for a few days, I found this Write typesafe js functions (kotlin2js) directly in ktor html builder. · Issue #249 · ktorio/ktor · GitHub
apparently we can’t mix ktor dsl with kotlin js.

But we can do this:

        input(InputType.text, name = "product", classes = "form-control") {
            onClick = "console.log('tesssssss')"
            onChange = "console.log('on change')"

            list = "productList"
            required = true
            placeholder = "product"
            dataList {
                id = "productList"

                products.forEach {
                    option {
                        value = it.name
                    }
                }
            }
        }

one thing to remember is that you have to put the onClick/onChange at the beginning. Or you will get stream tag error something