Select elements on a zul page

asked 2021-01-02 05:27:37 +0800

aUser gravatar image aUser
137 1 4

I want to reference a component inside a .zul page. According to these links: selection of elements and jQuery i could do something like this:

<?page title="" contentType="text/html;charset=UTF-8"?>
<script type="text/javascript" src="~./jquery-3.5.1.min.js" ></script>    

<window title="" border="normal">
    <div id="wrapper" style="width: 100px; height: 100px;">    

<script type="text/javascript">
    $("#wrapper").css("background-color", "red");     // using custom version of jQuery
    jq("#wrapper").css("background-color", "blue");   // using zk's version of jQuery

The custom version of jQuery is loaded since the output of alert(jQuery.fn.jquery) is 3.5.1 but the background-color property is not set at all. If i check the properties of the div elements in Chrome, i can see that are no background-color properties set.

I quote from one of the links above:

The Jq function ZK client engine include a version of jQuery selection accessible using the window.jq() function – or jq() for short.

This jq function can be used to select DOM elements in the same way the default $() function in standard jQuery.

For example, $(“#object1”) in standard jQuery is equlivalent to jq(“#object1”) in a ZK page. It will return a jQuery selection of DOM nodes matching the criteria id=”object1”

What am i doing wrong here?

ZK version is:

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted

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

MDuchemin gravatar image MDuchemin
2560 1 6
ZK Team

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.


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

link publish delete flag offensive edit


Thank you. I would like to ask what is the difference in using the jq() method and zk.$ method? I mean what could i do more/less by referencing the DOM object over the ZK Widget? Also, if i import a custom version of jQuery, why can't i use the $("$comp_id")? Is it possible only by using jq()?

aUser ( 2021-01-05 02:33:01 +0800 )edit

You can only use the $ selector in the jq version of jQuery, because it has been modified for use with ZK components. The $ selector references the ZK ID, which default jQuery libraries do not know about.

MDuchemin ( 2021-01-05 16:32:58 +0800 )edit

the jq method returns a jQuery selection result (a collection of dom nodes wrapped with jquery wrappers, with utilities such as the .css() function). The zk.$() method returns ZK widgets. A widget is an abstract JavaScript object, which serves as the data layer controlling the DOM elements

MDuchemin ( 2021-01-05 16:35:03 +0800 )edit

This documentation has a good summary of the difference between zk.$ and jq.

MDuchemin ( 2021-01-05 16:36:25 +0800 )edit
Your answer
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




Asked: 2021-01-02 05:27:37 +0800

Seen: 14 times

Last updated: Jan 04 '21

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