$('#myModal').modal(options)
where #myModal is the id of the dialog and options is a JS attribute dictionary.
I know how to get the DOM element in Nim (without the $/jQuery syntax):
var modalDialog = document.querySelector("#myModal")
However the element modalDialog obviously does not "know" about the modal method Bootstrap's JavaScript somehow attaches to this element. So in Nim I get on the line
modalDialog.modal()
of course "Error: attempting to call undeclared routine: 'modal'". How can I tell Nim that this method is attached to the element?
ps; I've had a look at the jQuery example in Nim's jsffi doco, but I don't think this here is a jQuery problem, because I have already the element for the .modal call. I think I just need to convert/cast it to a "modal dialog"...
Thanks. makes sense.
However when I try your approach I get an compile error, because modalDialog is not a JsObject, it is of type Element. (I want to do as much in normal Nim code, so that's why I get the dialog via var modalDialog = document.querySelector("#myModal") as an Nim Element.)
You can replace JsObject with Element, or do something like this (so .modal() cannot be called on just any Element:
type ModalElement = ref object of Element
proc selectModal(query: cstring): ModalElement =
result = document.querySelector(query).ModalElement
proc modal(obj: ModalElement, options = "") {.importc, nodecl.}
var modalDialog = selectModal("#myModal")
modalDialog.modal()
Aha! So the proc definition is only important for the Nim-side (i.e. if Nim needs an Element, the proc needs to be defined as taking an Element param, if Nim needs a JSObject, the proc has to be defined accordingly).
The only thing I now have to figure out, is how to call Bootstrap's "modal" functionality as a JavaScript function and not a object method. (The modal in the original $('#myModal').modal(options) is a method not a function.)
To have Nim call it correctly you could define it like this:
proc modal(obj: ModalElement, options = "") {.importcpp: "#.modal(#)".}
proc modal(obj: Element, options = "") {.importjs: "$$(#).modal(#)".}
but for the Nim code
var modalDialog = document.querySelector("#exampleModal") modal(modalDialog, "show")
the generated JS code is still:
var modalDialog_24645128 = document.querySelector("#exampleModal"); modalDialog_24645128.modal(makeNimstrLit("show"));
I am running Nim Compiler v1.3.5 - might that be the problem?
Try this if you want jQuery to do the selection:
proc modal(query: cstring, options: cstring = "") {.importjs: "$(#).modal(#)".}
"#exampleModal".modal("show")
JS output:
$("#exampleModal").modal("show");