+ Start a Discussion
Baktash H.Baktash H. 

Apex Actions Incompatible in invisible divs?


i was going to implement a beautiful popup on a page of mine:



Actually it works.

But in this popup i have a commandButton.

It looks like this:


<div style="display:none">

<apex:commandLink action="{!myAction}" value="Do it."/>



I am pretty sure it is because the display:none. Because when I remove it myAction works and does what it is supposed to do. But the display none is inevitable, because it should be visible in the popup and not before.


PS: The return type of the function is a PageReference and redirects me to another page.


Can anyone help me?


You are correct, it is because of the display:none.


I think your solutions are as follows:


1) Instead of a div use an outputPanel and its rendered attribute.  You can have a boolean "renderPopup" in your controller and change that and rendered the output panel based off it as necessary.  This is sorta a junky solution because it requires a trip to the server to open and close the popup.


2) Instead of using display:none, try jquery hide().

Baktash H.Baktash H.

Hey, thanks for your anser.


1) The first way: I did exactly that before and it worked. But it is much slower, after the click happens nothing for 1-2seconds because and the other reason i changed it, because it is ugly :)


2) how does jquey hide() work? Do i need another framework?




If you use display:none, all child nodes will also be hidden. What you need to do is make sure you're selecting the div and not the inner node. jQuery works just fine in Visualforce, as does any other framework.

Baktash H.Baktash H.

i tried jQuery hide and the action still does not work.


isn't there another way?


Thats too bad.  Here is the way I typically use for performant popups.


Use a jquery dialog.  Youll notice the same problem that VF doesnt work properly inside of it.


This is because jquery pushes the element you are using to contain the popup gets moved out of the form its in and right above the closing </body> tag of the page.


The fix is:


$( '#idOfMyPopup' ).dialog( 'open' ).parent().appendTo($('#thePage\\:theForm'));


Assuming your page has an id of "thePage" and your form has an id of "theForm".