How to call javascript function in ZK

Question

In ZK framework, inside zul file i want to call javascript function but it does not happens.

<a label="Click" onClick="popUp();">

I have that popUp() function also. But when I click on

<script type="text/javascript">
    function createPopUp(url)
    {
        var w = 600;
        var h = 500;
        var left = (screen.width/2)-(w/2);
        var top = (screen.height/2)-(h/2);
        window.open(url,'name','scrollbars=yes,width='+w+', height='+h+', top='+top+', left='+left);
    }
</script>

But when I click on that link it dispalys following error:

Sourced file: inline evaluation of: `` popUp();'' : 
Command not found: popUp() : at Line: 13 : 
in file: inline evaluation of: `` popUp();'' : popUp ( )

Narayan Subedi · Answer 1 · 2013-08-02T16:02:23.490

8

To solve this problem I found below way:

<a label="Click" xmlns:w="http://www.zkoss.org/2005/zk/client" w:onClick="createPopUp('http://www.facebook.com/prabhatsubedi');"/>

edited Aug 02 '13 at 16:02

answered Dec 13 '12 at 06:42

Narayan Subedi

1,343
2
20
46

4

BTW you can use a shortcut like `xmlns:w="client"` instead of complete url – kachhalimbu Dec 13 '12 at 09:58
btw, you asked question, answered it, accepted it, thank yourself and respond your thank. Your problem is bigger than javascript i think :) – asyard Aug 01 '13 at 15:20

score 1 · Accepted Answer · answered Jan 07 '13 at 19:35

1

As an alternative, if you want to achieve this in java, rather than .zul file, you can use

label.setWidgetListener(Events.ON_CLICK, "popUp();");

as indicated here with javadoc

answered Jan 07 '13 at 19:35

asyard

1,743
5
21
43

score 0 · Answer 3 · answered Aug 26 '22 at 01:45

As another alternative, it's also possible to call Javascript code from the server side using Clients.evalJavaScript. So you would place it in an event listener.

Example

Java:

@Command
public void createPopUp() {
    Clients.evalJavaScript("createPopUp('http://www.facebook.com/prabhatsubedi');");
}

Zul:

<a label="Click" onClick="@command('createPopUp')">

Addendum to @Narayan-Subedi's answer

You can declare the client namespace once at the top of your file and use it multiple times:

<zk xmlns:n="native" xmlns:c="client">
    <a label="Click" c:onClick="createPopUp('http://www.facebook.com/prabhatsubedi');"/>
</zk>

How to call javascript function in ZK

3 Answers3

Example

Addendum to @Narayan-Subedi's answer