[SalesForce] Onmouseout event not working

I'm trying to show an iframe onmouseover event and close that iframe onmouseout. Onmouseover is working but not the onmouseout event. Here's what I have tried….

<apex:outputLink value="OrderTrackingClass?id={!o.id}" 
                 onmouseover="var awin=window.open('OrderLines?id={!o.id}','Order Lines','height=300, width=1000, left=400, scrollbars=yes');"
                 onmouseout="awin.close();">
    {!o.Orders__c}
</apex:outputLink>

What am I missing?

Best Answer

I think var is creating a private variable which is unknown to the onmouseout call. Removing var making the awin variable to available in global scope. So that onmouseout it's getting awin variable and closing it.

Related Solutions

[SalesForce] onmouseout Event after clicking on link

There are 2 reasons that your current onMouseOut and onMouseOver code is not working:

Your jQuery id selector needs to be preceded with the '#' sign --- the Visualforce $Component.<componentName> syntax only gives you the Component's Id, but does not prefix it with a `#' sign, which is the selector for getting a DOM element by its Id.
The best way to show/hide an element with jQuery is to use the $(selector).show(), .hide(), or .toggle() methods. If you explicitly want to set the display property, then use $(selector).css('display','block')
For complex Visualforce element trees, as mast0r suggested, the best way to get at an element is to use the "attribute ends with" selector, as Visualforce automatically generates unique DOM Ids that generally are not equal to the "id" attribute that you assign in your Visualforce Page definition. For instance, if you had <apex:outputLink id="Foo" value="http://apple.com">, the generated DOM might be something like <a href="http://apple.com" id="j_id0:Foo"/>. So the best practice for accessing DOM elements by Id with jQuery in Visualforce is to do this: jQuery('[id$=<visualforceId>]').hide(), or in your case, jQuery('[id$=Foo]').hide();

So, with these in mind, here is how you can adjust your 2 handlers:

<apex:outputLink styleClass="helpLink" title="help"
    onmouseover="jQuery('[id$=Foo]').css('display','block');"
    onmouseover="jQuery('[id$=Foo]').css('display','none');">

[SalesForce] How to pass a variable’s value of child visualforce page to a variable in parent visualforce using js

You can use either Window.postMessage to safely transfer data between the popup and the original window; this is the preferred method. Alternatively, you can also set an Apex Cookie that can be shared between the two windows. Using expando properties of window.opener should not be used, because you can't even verify that the receiving page is even the original page which opened the popup; this might cause undesirable behavior.

Best Answer

Related Solutions

[SalesForce] onmouseout Event after clicking on link

[SalesForce] How to pass a variable’s value of child visualforce page to a variable in parent visualforce using js

Related Topic