-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hello,
In my recent project I used the Dynamic Tree.On using that I faced one problem of JavaScript.
Whenever I click on tree node or treeitem the tooltip appears said javascript:; on bottom of mozilla browser.
I have checked with IE browser also in it comes on status bar.I have checked all the version from mozilla 3.5 to mozilla 16.0 but same result.
Even its come on ZK demo site also.
How we can avoid this because it affect on our application.Please provide some solution on this.
Thanks !!
Hi natoosandeep,
This is not a javascript error, this is caused by the 'focus' mechanism of Tree component.
The Tree component use an a element with href="javascript:;" as an anchor and focus it when you clicking on tree to represent that the tree is focused (since there are only few dom element can receive the focus), you can reproduce this issue with pure html code as below:
<html> <head> <script type="text/javascript"> function moveAnchor (elem) { var anchor = document.getElementById('anchor'); console.log(elem.offsetTop); console.log(elem.offsetLeft); anchor.style.top = elem.offsetTop + 'px'; anchor.style.left = elem.offsetLeft + 'px'; anchor.focus(); } </script> <style> .z-focus-a { -moz-user-select: text; background: none repeat scroll 0 0 transparent !important; border: 0 none !important; font-size: 0 !important; height: 1px !important; left: 0; line-height: 0 !important; margin: 0 !important; outline: 0 none; overflow: hidden; padding: 0 !important; position: absolute; top: 0; width: 1px !important; } </style> </head> <body> <a id="anchor" class="z-focus-a" href="javascript:;"> </a> <div>click items below to see the "javascript:;" at bottom left in firefox</div> <div onclick="moveAnchor(this);">item one</div> <div onclick="moveAnchor(this);">item two</div> </body> </html>
Regards,
Ben
Thanks Ben for your valuable reply. The focus is not lost after clicking component. Can you tell me how to resolve this issue please ?
Do you mean you want the tree to lost its focus? Or do you mean you want to prevent any message displayed in status bar when click on tree?
Hi benbai, I just want to prevent the message.By lost its focus or anything else. Because I used MDI the URL of the application is not changed.By clicking the Menu the new Window window get Created with focus but the tooltip didn't remove.
You can override doFocus_ then blur immediately as below, note this way the keystroke will be disabled.
<zk xmlns:w="client">
<tree id="tree" rows="5">
<attribute w:name="doFocus_"><![CDATA[
function (evt) {
this.$doFocus_(evt);
jq(this.$n('a')).blur();
}
]]></attribute>
<treecols sizable="true">
<treecol label="Name" />
<treecol label="Description" />
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="Item 1" />
<treecell label="Item 1 description" />
</treerow>
</treeitem>
</treechildren>
<treefoot>
<treefooter label="Count" />
<treefooter label="Summary" />
</treefoot>
</tree>
</zk>
Thanks Benbai, It's works !! One more query these components are generated dynamically how can we apply java script for the same ? Your help be appreciable. Thanks !!
If you want to apply it to all trees, you can override it in zk.xml as below:
<zk>
<device-config>
<device-type>ajax</device-type>
<embed><![CDATA[
<script type="text/javascript">
// after package 'zul.sel' loaded
zk.afterLoad("zul.sel", function () {
// this object contains original functions
var _wgt = {};
zk.override(zul.sel.Tree.prototype, _wgt, {
// override functions
doFocus_: function (evt) {
_wgt.doFocus_.apply(this, arguments);
jq(this.$n('a')).blur();
}
});
});
</script>
]]></embed>
</device-config>
</zk>
Or you can call tree.setWidgetOverride("FUNCTION_NAME", "FUNCTION"); to apply it to specific tree.
Thanks Ben !! One more doubt if I want to implement this script for menu instead of tree. How we are going to tackle this because menu have anchor tag for Menu , Menupopup & Menuitem ?
For menupopup, it is similar with tree, just call blur of anchor when it is focused.
Regarding menuitem, it is more tricky since href is specified on menuitem itself directly, you need to use another dom to cover menuitem and listen to the events of the 'cover' dom.
Please refer to the working sample below:
<zk xmlns:w="client">
<script><![CDATA[
var _wgt = {};
zk.afterLoad("zul.menu", function () {
zk.override(zul.menu.Menuitem.prototype, _wgt, {
doMouseOver_: function (evt) {
var cover = zk.Widget.$('$cover'),
$n = jq(this.$n()),
$cn = jq(cover.$n()),
noffset = $n.offset(),
old = cover.oldWgt,
cnoffset,
diff;
if (evt.target == cover) {
_wgt.doMouseOver_.apply(this, arguments);
} else {
if (old
&& old != this) {
// clear old binded functions
old.domUnlisten_(cover.$n(), "onMouseOver", "doMouseOver_");
old.domUnlisten_(cover.$n(), "onMouseOut", "doMouseOut_");
old.domUnlisten_(cover.$n(), "onMouseDown", "doMouseDown_");
old.domUnlisten_(cover.$n(), "onMouseUp", "doMouseUp_");
old.domUnlisten_(cover.$n(), "onClick", "doClick_");
}
cover.oldWgt = this;
if (!old
|| old != this) {
// listen dom events of cover
this.domListen_(cover.$n(), "onMouseOver", "doMouseOver_");
this.domListen_(cover.$n(), "onMouseOut", "doMouseOut_");
this.domListen_(cover.$n(), "onMouseDown", "doMouseDown_");
this.domListen_(cover.$n(), "onMouseUp", "doMouseUp_");
this.domListen_(cover.$n(), "onClick", "doClick_");
}
// move cover to self position and resize it
$cn.width($n.outerWidth(true));
$cn.height($n.outerHeight(true));
$cn.css({
'position': 'absolute',
'left': noffset.left + 'px',
'top': noffset.top + 'pbx',
'z-index': '999999'
});
cnoffset = $cn.offset();
diff = cnoffset.left - noffset.left;
if (diff != 0) {
$cn.css('left', cnoffset.left-diff + 'px');
}
diff = cnoffset.top - noffset.top;
if (diff != 0) {
$cn.css('top', cnoffset.top-diff + 'px');
}
}
}
});
});
]]></script>
<menubar>
<menu label="File">
<menupopup>
<attribute w:name="bind_"><![CDATA[
function (a, b, c) {
this.$bind_(a, b, c);
var $a = jq(this.$n('a'));
$a.bind('focus', function () {
$a.blur();
});
}
]]></attribute>
<menuitem label="New"
onClick='System.out.println("test");' />
<menuitem label="Open"
onClick='System.out.println("test2");' />
<menuitem label="Save"
onClick='System.out.println("test3");' />
<menuseparator/>
<menuitem label="Exit"
onClick='System.out.println("test4");' />
</menupopup>
</menu>
<menuitem label="Home" onClick='System.out.println("test5");' />
</menubar>
<!-- cover used to 'mask' menuitem -->
<div id="cover" />
</zk>
Thank you very much Ben for your valuable support !!
Asked: 2012-11-21 07:39:01 +0800
Seen: 93 times
Last updated: Sep 03 '13