Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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);
window.doOverlapped();
in an onClick-Method of the toolbar icon.
UPDATE
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:
<zk>
<window>
<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 () {
$(container).highcharts(json);
});
};
</script>
<borderlayout>
...
<center border="none">
<div width="99%" height="100%" align="center">
<window title="Preview" width="100%" height="100%" border="normal">
<vlayout>
<div id="container"></div>
</vlayout>
</window>
</div>
</center>
...
</window>
</zk>
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)
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 :
http://zkfiddle.org/sample/4b9qh0/20-Datebox-MVVM-formatting
Greetz chill.
Asked: 2015-07-31 06:24:04 +0800
Seen: 59 times
Last updated: Nov 09 '17
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 )editTry adding the type and look with developer tools if the js is downloaded or not.
chillworld ( 2015-07-31 11:44:32 +0800 )editI 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 )editsorry 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