xhr cancelled error in onclick of xp:link with a xe:tooltipDialog & xe:djContentPane with a partial refresh

Question

I have a problem using a onclick event on a xp:link and a mouseover that popups up a tooltipdialog that performs an partial refresh to get it's contents. Whenever a user wants to click the link, it is possible that the tooltip has already poppup up and loading it's contents. Because the link will redirect to another page, the partial refresh event in the content pane is being cut off. This results in the error 'xhr cancelled' almost everytime (you can see it inside your browser's console like Firebug).

I have tried several things like trying to .cancel() the contentpane before redirecting to another page but it isn't working probably because it is in a tooltipDialog so I can't get a handle to it.

Below is an example of the code, you can test it out by putting it into a new xpage inside the Xpages Extension Library demo nsf (filled with data). Just hover the link and just before the tooltip finishes loading its contents, click the link.

    <?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.data>
        <xp:dominoView var="view1" viewName="AllContacts"></xp:dominoView>
    </xp:this.data>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:link escape="true" text="Hover me" id="link1" style="margin-left:50px;"
        value="/Core_DojoLayout.xsp">
        <xp:this.onmouseover><![CDATA[tooltipTimerId = setTimeout ( "XSP.openTooltipDialog('#{id:tooltipDialog1}','#{id:link1}');", 500 );
                    ]]></xp:this.onmouseover>
        <xp:this.onmouseout><![CDATA[if (tooltipTimerId){
                clearTimeout (tooltipTimerId);
            }]]></xp:this.onmouseout>
    </xp:link>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xe:tooltipDialog id="tooltipDialog1">
        <xe:djContentPane id="djContentPane1" refreshOnShow="false"
            partialRefresh="true" preload="true">
            <xp:repeat id="repeat1" rows="1000" value="#{view1}"
                var="row">
                <xp:text escape="true" id="computedField1"
                    value="#{row.FirstName}">
                </xp:text>
                &#160;&#160;
                <xp:text escape="true" id="computedField2"
                    value="#{row.LastName}">
                </xp:text>
                <xp:br></xp:br>
            </xp:repeat>
        </xe:djContentPane>
    </xe:tooltipDialog>
</xp:view>

Answer 1

I fixed it! The problem is the XSP.error being called when there is something wrong. Because I do not want any ugly alert boxes I'll redifine the function with this code. The XSP message (in my case error) is logged to the console.

    <xp:scriptBlock id="scriptBlock1"
    value="XSP.error = function(err){
            console.error('XSP error : ' + err);
        };">
</xp:scriptBlock>

Answer 2

Ferry - Do you have to combine them? An alternate is to place an icon next to the Link and add the mouseover to the icon (a small person icon maybe) - then you can something to mouseover and something to click rather than trying to combine.

Another option would be to place the link and a div (side by side) inside of a parent (table or div or something) and using CSS place the div on top of the link. Then apply the mouseover to the DIV then it would refresh for the tooltip leaving your link intact and clickable.

Let me know if that helps :)