How can i add js libraries to a single zk window?

asked 2015-07-31 06:24:04 +0800

suzuha gravatar image suzuha
13 3

updated 2015-07-31 10:32:22 +0800

Hi, I am currently trying to run some javascript in .zul.

I know I can add libraries like this:

<?script src="http://code.highcharts.com/highcharts.js" ?>
<?script src="http://code.highcharts.com/highcharts-more.js" ?>
<?script src="http://code.highcharts.com/modules/exporting.js" ?>

Problem is I only want to add this libs for one specific window.

Currently the structure is like this: Mainprogramm: Borderlayout with navigation and utilites in index.zul . The content is loaded into the center section.

Now when I have selected content via navigation the content has its own toolbar. In this toolbar shall be a button/icon to open the window wich needs the javascript.

The problem that I encountered is that the javascript libraries only work if I add them to the index.zul from the main programm where everything is embedded.

Which is understandable coz there would be only one <head>. But i don't want to add these libraries in the main programm. Only for the single window that needs it in chartbuilder.zul , Is there a way to do it?

I create the window like this:

Window window = (Window)Executions.createComponents("chartbuilder.zul", null, null);

in an onClick-Method of the toolbar icon.


I tried that but then my function isn't found maybe i need to give you some code:

In the zul i would use this:

    <script src="http://code.highcharts.com/highcharts.js" />
    <script src="http://code.highcharts.com/highcharts-more.js" />
    <script src="http://code.highcharts.com/modules/exporting.js" />
    <script type="text/javascript">
        function testChart(json){
            var container = jq("$container");

            $(function () { 
        <center border="none">
            <div width="99%" height="100%" align="center">
                <window title="Preview" width="100%"  height="100%" border="normal">
                        <div id="container"></div>

And the function is called from Java via:

Clients.evalJavaScript("testChart("+ json +")");

If i try that the function is not found: $(...).highcharts is not a function (TypeError)

delete flag offensive retag edit


I updated my question seems like the problem is related to my use of function calling so i added the related code.

suzuha ( 2015-07-31 10:28:33 +0800 )edit

Try adding the type and look with developer tools if the js is downloaded or not.

chillworld ( 2015-07-31 11:44:32 +0800 )edit

I added the type but nothing changed so i looked via mozilla developer console the inspector showed the libraries in the head tag and the debugger shows the libraries. So i think it loaded. Could this have something to do with the call from java to javascript?

suzuha ( 2015-07-31 13:07:41 +0800 )edit

sorry for late reaction, I'm on holiday so not much present online. If possible can you create a fiddle with your error?

chillworld ( 2015-08-01 11:10:14 +0800 )edit

2 Answers

Sort by ยป oldest newest most voted

answered 2015-07-31 09:38:47 +0800

chillworld gravatar image chillworld flag of Belgium
5307 4 9

updated 2015-07-31 09:38:59 +0800

just use the script tag and not the <?script>:

<script src="http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js" type="text/javascript"></script>

fiddle example :


Greetz chill.

link publish delete flag offensive edit

answered 2017-11-09 10:48:11 +0800

Easton6 gravatar image Easton6

just use the script tag and not the :

link publish delete flag offensive 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: 2015-07-31 06:24:04 +0800

Seen: 41 times

Last updated: Nov 09 '17

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