1

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 )

<zk>
<html>
     <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>
     <script>

               $('#countdown1').timeTo({
                    seconds: Number($('#here').text())/10000,// i want to insert a the delay of timer here.
                    theme: "black",
                    fontSize: 20
                });
                 </script>
            </html>

</zk>
delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

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" ?>

<zk>
<script type="text/javascript">

    zk.afterMount(function() {
        $("$countdownContainer").timeTo();
    });

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

</script>

<window id="winCountdown"  title="Fancy countdown" border="normal" 
        apply="org.zkoss.bind.BindComposer" 
        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')" />
        </hlayout>

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

    </vlayout>

</window>
</zk>

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; 

    @AfterCompose
    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;}

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

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

Hope that helps,

Costas

link publish delete flag offensive edit

Comments

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

Follow
1 follower

RSS

Stats

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