give jquery a value from a ZK timer ( or label)

asked 2014-05-30 17:29:23 +0800

elmetni gravatar image elmetni
145 7

updated 2014-05-30 17:29:52 +0800

hello everything i am working on a zk project and i need to send the value of "delay" of a timer to a Jquery fonction , i tried to use EL , but it s not seem to work with me , here is my code , can u help me pls? ( i have no experience in jquery )

     <div id="countdown1"></div><br></br>
     <label  id="here" >${refreshTimer.deplay}</label>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script src="jquery-1.9.1.min.js"></script>
     <script src="jquery.timeTo.min.js"></script>

                    seconds: Number($('#here').text())/10000,// i want to insert a the delay of timer here.
                    theme: "black",
                    fontSize: 20

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2014-06-02 12:05:08 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-06-02 21:34:58 +0800

Intergrating ZK with various jQuery plugins is not something tricky but it does need your attention and you have to understand some basic things.

  1. You should not import the jquery library in your page. It is already loaded since ZK is based on this.

  2. When you are refering to a ZK widget inside your jquery code you have to use the $ instead of the # symbol.

  3. Always initialize the plugin inside the zk.afterMount() function. This ensures that your plugin will be instantiated after ZK is ready.

Here is a simple working example with jquery timeTo plugin. Notice also the way the plugin communicates with the server via the zAu.send() method:

<?page title="Layouts Test" contentType="text/html;charset=UTF-8" ?>
<?link rel="stylesheet" type="text/css" href="/timeto/timeTo.css" ?>
<?script src="/timeto/jquery.timeTo.min.js" ?>

<script type="text/javascript">

    zk.afterMount(function() {

    function startCountdown(seconds) {
        $("$countdownContainer").timeTo(seconds, function(){
            zAu.send(new zk.Event(zk.Widget.$('$winCountdown'), 'onCountdownFinished', '')); 


<window id="winCountdown"  title="Fancy countdown" border="normal" 
        viewModel="@id('vm') @init('snippets.CountdownVM')">

    <vlayout >

        <hlayout valign="middle">
            <label value="Number of seconds" />
            <intbox value="@bind(vm.seconds)" />
            <button label="Start countdown" onClick="@command('startCountdown')" />

        <div id="countdownContainer" align="center" />



And here is a simple ViewModel to drive the page:

package snippets;

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.util.Clients;

public class CountdownVM {

    private int seconds; 

    public void doAfterCompose(@ContextParam(ContextType.VIEW) Component view){
        Selectors.wireComponents(view, this, false);
        Selectors.wireEventListeners(view, this);

    public int getSeconds() {return seconds;}
    public void setSeconds(int seconds) {this.seconds = seconds;}

    public void startCountdown() {
        if (seconds > 0)
            Clients.evalJavaScript("startCountdown(" + seconds + ");");
            Clients.showNotification("Invalid time period");

    @Listen("onCountdownFinished = #winCountdown")
    public void onCountdownFinished(Event event) {
        Clients.showNotification("Server says: BOOM!!!");

Hope that helps,


link publish delete flag offensive edit


Works perfectly , million thx mate u really help me out a lot , i was giving up on the whole idea hhh , thx

elmetni ( 2014-06-02 22:12:18 +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

1 follower



Asked: 2014-05-30 17:29:23 +0800

Seen: 48 times

Last updated: Jun 02 '14

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