0

Access zk component ID in JavaScript

asked 2010-07-12 09:08:34 +0800

cjfleck gravatar image cjfleck
60 1

updated 2010-07-12 09:08:49 +0800

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");

And
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

delete flag offensive retag edit

5 Replies

Sort by ยป oldest newest

answered 2010-07-12 20:14:55 +0800

samchuang gravatar image samchuang
4084 4

updated 2010-07-12 20:28:43 +0800

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

link publish delete flag offensive edit

answered 2010-07-13 15:16:35 +0800

cjfleck gravatar image cjfleck
60 1
Thanks for the advice. It still isn't entirely clear to me when to use the various techniques, but I'm learning. The documentation helped. I still have some problems though. Foremost is, why doesn't getUuid work in certain cases? In fact, calling it like below seems to be a javascript failure as it halts any proceeding code as well. For example...
<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">
link publish delete flag offensive edit

answered 2010-07-13 19:45:48 +0800

samchuang gravatar image samchuang
4084 4

Hi

from the javascript doc, there's no getUuid() function, uuid is a property.

link publish delete flag offensive edit

answered 2010-07-14 08:06:08 +0800

cjfleck gravatar image cjfleck
60 1

Wow. Thanks. I can't believe I missed that.

link publish delete flag offensive edit

answered 2015-09-10 10:46:19 +0800

Icebergx5 gravatar image Icebergx5
1

Yes this is worked,

alert(this.$f('sendBtn').uuid);

thanks for reply...

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2010-07-12 09:08:34 +0800

Seen: 2,264 times

Last updated: Sep 10 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More