-
FEATURED COMPONENTS
First time here? Check out the FAQ!
I'm using zk 5.
I'm trying to access various zk elements with client side js, but failing. I've tried following the tips in the links below, but still no luck.
As an example, consider a zk textbox.
<textbox id="msg" value=""/>
I want to write js code that can manipulate the value of this textbox, but I can't seem to grab the element by id. I've tried...
var your_component = document.getElementById("msg");
var your_component = document.getElementById("${msg.uuid}");
But no luck. Is there something I'm missing? It keeps coming back null.
http://www.zkoss.org/forum/listComment/9056
http://www.zkoss.org/forum/listComment/5765;jsessionid=4CE3C535504718126723B36A443CF100.zkzh
Hi
the id is the server side id, in client side, there is a id called uuid, we could get uuid in server side and send to client side to get node
or we could use $f() to get widget and use $n() to get node
<?page title="new page title" contentType="text/html;charset=UTF-8"?> <zk xmlns:w="http://www.zkoss.org/2005/zk/client"> <hbox> <window title="Get widget by $f()" border="normal" width="300px"> <button id="btn" label="Set Label" > <attribute w:name="onClick"> var msgWidget = this.$f('msg'), msgDOM = msgWidget.$n(); msgWidget.setValue('Set value by client'); </attribute> </button> <label id="msg"/> </window> <window title="Get widget by send uuid to client side" border="normal" width="300px"> <script> function setMessage(uuid) { var msgDOM = jq('#' + uuid), msgWidget = zk.Widget.$(uuid); msgWidget.setValue('set value by send uuid to client side'); } </script> <button id="btn" label="Set Label" > <attribute name="onClick"> Clients.evalJavaScript("setMessage('" + msg.getUuid() + "')"); </attribute> </button> <label id="msg"/> </window> </hbox> </zk>
you could also refer to Client_Side_Programming
also, refer to javascript API
<script defer="true"> alert(this.$f('sendBtn').getLabel()); // works alert(this.$f('sendBtn').getUuid()); // no alert box comes up alert('getting here at all?'); // the answer to the question is "no" </script>
<button id="sendBtn" label="Send Away">
Asked: 2010-07-12 09:08:34 +0800
Seen: 2,264 times
Last updated: Sep 10 '15