answered 2021-01-04 13:08:32 +0800

MDuchemin
1856 ● 1 ● 5

Hi there!

You are almost good here, but you are encountering 2 problems. Firstly, the ZK framework will not be initialized when you are executing this code.

When the page load, ZK packages will be loaded, then the components will be rendered, it's a whole process :D

So, the order of operation in your sample is:

1. page response is received

2. your code is executed

3. zk packages finish to load

4. the div is actually created

You code is executed, just way too early. A good way to prevent that is to execute this kind of operation once the target component has initialized

A decent way to do that is to use the w:onBind listener https://www.zkoss.org/wiki/ZKClient-sideReference/Notifications/Widget_Events

See a sample here: https://zkfiddle.org/sample/15stpfc/4-Another-new-ZK-fiddle

Now, your second problem is just a small confusion between Server and client-side IDs A ZK component is a Java object, which may receive an ID. The resulting DOM node in the browser have an id attribute, but it's not the same as the Component's ID. Instead, it uses the component's UUID.

<div id="wrapper" style="width: 100px; height: 100px;">

Here, you are creating a ZK "Div" component, with the ID wrapper. It will have an automatically assigned UUID (that's normal) which may look like ABC123123 In dom, it will be generated as:

<div id="ABC123123" style="width: 100px; height: 100px;">

You can't use the # selector, because you would need to use the UUID instead here. HOWEVER there is a better option. Since the jq() method is customized for ZK objects, you can use the "$id" selector to match by ZK Ids

jq("$wrapper").css("background-color", "blue");

will let you do what you were trying to do here. I also want to mention that the following will let you target the ZK widget (the javascript object representing the component), while the jq function will only let you select DOM nodes.

zk.$("$wrapper")

One more thing :D If you are using onBind, you can also retrieve the widget directly from the listener itself. Since you can use a widget as argument of the jq function, you can even skip the need for a selector altogether ;) https://zkfiddle.org/sample/15stpfc/6-Another-new-ZK-fiddle