-
FEATURED COMPONENTS
First time here? Check out the FAQ!
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>
Intergrating ZK with various jQuery plugins is not something tricky but it does need your attention and you have to understand some basic things.
You should not import the jquery library in your page. It is already loaded since ZK is based on this.
When you are refering to a ZK widget inside your jquery code you have to use the $ instead of the # symbol.
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
Asked: 2014-05-30 17:29:23 +0800
Seen: 50 times
Last updated: Jun 02 '14
Customize ZK's JavaScript Code
Create tab dynamically, multitab application
Unable to get default printer name while using applet
Problem calling window.addEventListener inside a script
Global DecimalBox onChanging currency format
Facing issue in masking on phone [closed]