Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
Hi, I hope this is a simple misunderstanding of script scope inside a zul, but I'm trying to access a javascript function, but only a script defined inside an <html/> tag works.
Consider the following code. In it, the "works" button finds the visible() function, but the "doesn't work" button gets an error:
Failed to process script notVisible is not defined (ReferenceError)
<html><![CDATA[
<script type="text/javascript" defer="true">
function visible() {
console.log('visible');
}
</script>
]]></html>
<script type="text/javascript" defer="true"><![CDATA[
function notVisible() {
console.log('NOT visible');
}
]]></script>
<button label="works">
<attribute name="onClick">
Clients.evalJavaScript("visible();");
</attribute>
</button>
<button label="doesn't work">
<attribute name="onClick">
Clients.evalJavaScript("notVisible();");
</attribute>
</button>
Looking at the generated page source, I get the following. Basically it looks like the "doesn't work" script is placed inside a (function()) making it invisible. How do I get around this?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="/twiitch-orcs-admin2/zkau/web/45f16deb/zul/css/zk.wcs"/>
<script type="text/javascript" src="/twiitch-orcs-admin2/zkau/web/45f16deb/js/zk.wpd" charset="UTF-8"></script>
<!-- ZK 7.0.0 2013112611 -->
</head>
<body>
<div id="xJUE_" class="z-temp"><div id="zk_proc" class="z-loading"><div class="z-loading-indicator"><span class="z-loading-icon"></span>Processing...</div></div><div id="xJUE1" style="display:none">
<script type="text/javascript" defer="true">
function visible() {
console.log('visible');
}
</script>
</div>
<div id="xJUE5" style="display:none">
<script type="text/javascript" defer="true">
function sendToServer() {
payload = screen.width+'x'+screen.height;
var w = zk("$info");
var ww = zk.Widget.$(jq("$info"));
console.log('w = ' + w);
console.log('ww = ' + ww);
var infoWidget = this.$().info;
console.log('infoWidget = ' + infoWidget);
zAu.send(new zk.Event(zk.Widget.$(jq("$blah")), 'onBlah', payload));
zAu.send(new zk.Event(ww, 'onBlah', payload));
}
</script>
<a href="javascript:;" onclick="zk.Widget.$(jq('$labelone')).setValue('changed with jq');">not widget</a>
</div>
</div>
<script class="z-runonce" type="text/javascript">
zkmx(
[0,'xJUE_',{dt:'z_wv_0',cu:'/twiitch-orcs-admin2',uu:'/twiitch-orcs-admin2/zkau',ru:'/test.zul'},[
['zul.wnd.Window','xJUE0',{id:'info',$$onSize:false,$$onMaximize:false,$$onOpen:false,$$onMinimize:false,$$onZIndex:false,$onClose:true,$$onMove:false,prolog:'\n '},[
['zul.wgt.Html','xJUE1',{content:zk('xJUE1').detachChildren()},[]],
['zul.utl.Script','xJUE2',{content:function(){
function notVisible() {
console.log('NOT visible');
}
}},[]],
['zul.wgt.Button','xJUE3',{$onClick:true,label:'works'},[]],
['zul.wgt.Button','xJUE4',{$onClick:true,label:'doesn\'t work'},[]],
['zul.wgt.Html','xJUE5',{id:'blah',content:zk('xJUE5').detachChildren()},[]],
['zul.wgt.Label','xJUE6',{id:'labelone',listeners:{onClick:function(event){
this.setValue('changed by click label');
}},value:'click to change'},[]],
['zul.wgt.Button','xJUE7',{id:'mybutton',$onClick:true,label:'pushme'},[]]]]]]);
</script>
<noscript>
<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div>
</noscript>
</body>
</html>
Asked: 2014-02-25 07:16:06 +0800
Seen: 39 times
Last updated: Feb 25 '14