Servus,
I declared a textarea ( id = kstring("textareaPlain") ), keeping the current 'value' in the variable 'textareaPlainContent'.
After changing the content of the textarea (not by user interaction), I'd like to see the new content immediately in the textarea.
let
taNode = getVNodeById( kstring("textareaPlainContent") )
textareaPlainContent = kstring("A new content")
taNode.value = textareaPlainContent
# How to redraw or refresh the textarea here?
How to redraw or refresh the textarea?
The textarea is defined like this:
textarea(id = kstring("textareaPlain"), style = { fontSize: cstring("120%") },
rows = kstring("18"), cols = kstring("50"),
value = textareaPlainContent
onblur = textareaPlainMayBeChanged
Servus Peter
let
taNode = getVNodeById( kstring("textareaPlainContent") )
textareaPlainContent = kstring("A new content")
taNode.value = textareaPlainContent
?How to redraw or refresh the textarea here?
taNode.setInputText(textareaPlainContent) # doesn't work
markDirty( VComponent(taNode) ) # doesn't work
redraw() # doesn't work
If you are accessing the node directly, setInputText should work fine. Here's a working example:
include pkg/karax/prelude
proc drawApp: VNode =
buildHtml(tdiv):
textarea(id="textareaPlainContent")
setRenderer drawApp
##############################
import std/dom
var i = 0
proc callback =
getVNodeById("textareaPlainContent").setInputText("hello world " & cstring $i)
inc i
discard setInterval(callback, 1000)
If you can post a minimal one-file reproduction of your issue it would help to see if there is another cause
Thank you for your example, it did help me.
Here's my working example with two buttons and two textareas.
That's what I need for a crypto app.
std/dom
import karax/vstyles
include pkg/karax/prelude
proc k(x: string): cstring =
cstring x
proc box(): VStyle =
style {StyleAttr.flex: k"0"}
proc hStack(): VStyle =
style {StyleAttr.display: k"flex", StyleAttr.flexDirection: k"row"}
proc vStack(): VStyle =
style {StyleAttr.display: k"flex", StyleAttr.flexDirection: k"column"}
var
textarea1Content = k"content1 "
textarea2Content = k"content2 "
proc textarea1MayBeChanged(ev: Event; n: VNode) =
textarea1Content = n.value
proc textarea2MayBeChanged(ev: Event; n: VNode) =
textarea2Content = n.value
# for onClickTestButton1
proc updateTextarea2 =
getVNodeById(k"textarea2").setInputText(textarea2Content)
proc onClickTestButton1(ev: Event; n: VNode) =
textarea2Content = textarea1Content & k"+"
discard setTimeout(updateTextarea2, 1)
# for onClickTestButton2
proc updateTextarea1 =
getVNodeById(k"textarea1").setInputText(textarea1Content)
proc onClickTestButton2(ev: Event; n: VNode) =
textarea1Content = textarea2Content & k"-"
discard setTimeout(updateTextarea1, 1)
proc drawApp(): VNode =
result = buildHtml(tdiv):
tdiv(style = {height: k"600px", width: k"500px"}):
tdiv(style = vStack()):
tdiv(style={marginTop: k"4%"}):
text k"Example using 'setInputText'"
tdiv(style={marginTop: k"4%"}):
text k"Both textareas are editable"
tdiv(style={marginTop: k"1%", marginBottom: k"2.5%", width: k"28%"}):
button(onclick = onClickTestButton1):
strong: text k"Append '+' and show in other Textarea"
tdiv(style = box()):
textarea(id = k"textarea1", style = {fontSize: k"140%"},
rows = k"4", cols = k"50",
value = textarea1Content,
onblur = textarea1MayBeChanged)
tdiv(): hr(class="divider"): discard
tdiv(style={marginTop: k"1%", marginBottom: k"2.5%", width: k"28%"}):
button(onclick = onClickTestButton2):
strong: text k"Append '-' and show in other Textarea"
tdiv(style = box()):
textarea(id = k"textarea2", style = {fontSize: k"140%"},
rows = k"4", cols = k"50",
value = textarea2Content,
onblur = textarea2MayBeChanged)
setRenderer drawApp