0

JavaScript Error Tooltip on Selection of Tree or Treeitem on Mozilla Browser

asked 2012-11-21 07:39:01 +0800

natoosandeep gravatar image natoosandeep
45

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 !!

delete flag offensive retag edit

10 Replies

Sort by ยป oldest newest

answered 2012-11-29 09:17:23 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2012-11-29 09:19:58 +0800

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:;">&nbsp;</a>
        <div>click items below to see the &quot;javascript:;&quot; at bottom left in firefox</div>
        <div onclick="moveAnchor(this);">item one</div>
        <div onclick="moveAnchor(this);">item two</div>
    </body>
</html>

Regards,
Ben

link publish delete flag offensive edit

answered 2013-08-19 12:33:05 +0800

natoosandeep gravatar image natoosandeep
45

updated 2013-08-19 13:37:27 +0800

Thanks Ben for your valuable reply. The focus is not lost after clicking component. Can you tell me how to resolve this issue please ?

link publish delete flag offensive edit

answered 2013-08-19 23:25:19 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

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?

link publish delete flag offensive edit

answered 2013-08-20 06:12:48 +0800

natoosandeep gravatar image natoosandeep
45

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.

link publish delete flag offensive edit

answered 2013-08-26 01:44:42 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

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>
link publish delete flag offensive edit

answered 2013-08-27 13:04:29 +0800

natoosandeep gravatar image natoosandeep
45

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 !!

link publish delete flag offensive edit

answered 2013-08-29 05:15:26 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2013-08-29 05:16:02 +0800

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.

link publish delete flag offensive edit

answered 2013-08-29 07:04:13 +0800

natoosandeep gravatar image natoosandeep
45

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 ?

link publish delete flag offensive edit

answered 2013-09-02 03:08:58 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2013-09-02 03:10:04 +0800

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>
link publish delete flag offensive edit

answered 2013-09-03 12:02:21 +0800

natoosandeep gravatar image natoosandeep
45

Thank you very much Ben for your valuable support !!

link publish delete flag offensive edit
Your reply
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

Follow

RSS

Stats

Asked: 2012-11-21 07:39:01 +0800

Seen: 93 times

Last updated: Sep 03 '13

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