Apex Code Development You need to sign in to do that
Don't have an account?
dsh210@lehigh.edu Closing Popup
Hey all,
So right now I am having an issue with a popup opened by javascript not closing itself. I am executing the self.close() javascript on the "save" button in the window, but the window simply refreshes itself rather than closing. Does anyone know if visualforce is stopping the close() action, and if so, is there a known workaround to close the popup?
Thanks,
Derrek
Hi,
I would assume the "Save" button in pop-up is doing some DML operation in corresponding controller.
The problem here is, upon clicking the Save button, the form submits. And if you have tagged a javascript self.close() in onclick event, it fails, as form is in the process of submission.
So to make best use of self.close(), the state of the form shouldnt be in processing, rather something like in steady state ( just think form should be in still)
The approach to solve the problem is something like this...
1) In your pop-up VF page, include a <apex:inputHiddern/> tag within <apex:form/> tag. This <apex:inputHidden/> tag will have a String variable, say "status", associated with it in controller (of course with getters and setters).
2) In your javascript , include a function which will check the value of this inputHidden component and if the value is something like "saved" or "close" or anything that will identify as go signal after your save operation completes successfully, then use "self.close()"
3) Call this function in point 2 whenever your pop-up page loads. This is simple. E.g. if your function name is "checkStatus" then
<script type="text/javascript">
checkStatus();
function checkStatus(){
var status = document.getElementById("pg:frm:statusComponent");
if(status.value == "saved"){
self.close();
}
}
// rest of your javascript coding...
</script>
3) In the controller function, which performs action to save button, perform your DML in try-catch. And after your DML gets successful then set the value of variable "status" to "saved" else keep some random value. So when the page loads after save action is completed you will have two outcomes
1> Saved succesfully
2> Some exception is thrown
Hence if it saves successfully, the value in inputHidden component changes upon load and your javascript function runs after page loads, checking the value in inputHidden. If successful then pop-up close, else you can use the chance to show the error message.
Hope this helps.
Cheers....
All Answers
Hi,
I would assume the "Save" button in pop-up is doing some DML operation in corresponding controller.
The problem here is, upon clicking the Save button, the form submits. And if you have tagged a javascript self.close() in onclick event, it fails, as form is in the process of submission.
So to make best use of self.close(), the state of the form shouldnt be in processing, rather something like in steady state ( just think form should be in still)
The approach to solve the problem is something like this...
1) In your pop-up VF page, include a <apex:inputHiddern/> tag within <apex:form/> tag. This <apex:inputHidden/> tag will have a String variable, say "status", associated with it in controller (of course with getters and setters).
2) In your javascript , include a function which will check the value of this inputHidden component and if the value is something like "saved" or "close" or anything that will identify as go signal after your save operation completes successfully, then use "self.close()"
3) Call this function in point 2 whenever your pop-up page loads. This is simple. E.g. if your function name is "checkStatus" then
<script type="text/javascript">
checkStatus();
function checkStatus(){
var status = document.getElementById("pg:frm:statusComponent");
if(status.value == "saved"){
self.close();
}
}
// rest of your javascript coding...
</script>
3) In the controller function, which performs action to save button, perform your DML in try-catch. And after your DML gets successful then set the value of variable "status" to "saved" else keep some random value. So when the page loads after save action is completed you will have two outcomes
1> Saved succesfully
2> Some exception is thrown
Hence if it saves successfully, the value in inputHidden component changes upon load and your javascript function runs after page loads, checking the value in inputHidden. If successful then pop-up close, else you can use the chance to show the error message.
Hope this helps.
Cheers....
Hello
I tried to apply your solution but the window is still not closed although javascript function is loaded. Could you maybe say why? Here is my code:
<apex:page standardController="Opportunity" extensions="PPOppWonController"
sidebar="false" showHeader="false" standardStylesheets="false" wizard="false" id="pg" >
<html>
<head></head>
<body onload="checkStatus();"></body>
</html>
<apex:form id="frm" >
<table>
<tr>
<td valign="top">
<apex:inputTextarea id="sReasonWon" value="{!sReasonWon}" cols="35" rows="5"
onkeypress="return disableEnterKey(event)"></apex:inputTextarea>
<apex:inputHidden id="stat" value="{!sStatus}" />
</td></tr>
<tr> <td>
<apex:commandButton action="{!save}" id="btn" value="Request Won " />
</td>
</tr>
</table>
<script>
var btn = document.getElementById("{!$Component.btn}");
var sts = document.getElementById("{!$Component.frm.stat}");
</script>
</apex:form>
<script type="text/javascript">
function disableEnterKey(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return (key != 13);
}
function checkStatus(){
if(sts.value == 'saved'){
self.close();
} }
</script>
</apex:page>
Thank you in advance!
Hi leloup ,
I have used the visualforce code posted by you and I have got positive results. here is the visualforce code
<apex:page standardController="Opportunity" extensions="OppEditExt1" sidebar="false" showHeader="false" standardStylesheets="false" wizard="false" id="pg" > <html> <head></head> <body onload="checkStatus();"></body> </html> <apex:form id="frm" > <table> <tr> <td valign="top"> <apex:inputTextarea id="sReasonWon" value="{!sReasonWon}" cols="35" rows="5" onkeypress="return disableEnterKey(event)"></apex:inputTextarea> <apex:inputHidden id="stat" value="{!sStatus}" /> </td></tr> <tr> <td> <apex:commandButton action="{!save}" id="btn" value="Request Won " /> </td> </tr> </table> <script> var btn = document.getElementById("{!$Component.btn}"); var sts = document.getElementById("{!$Component.frm.stat}"); </script> </apex:form> <script type="text/javascript"> function disableEnterKey(e) { var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox return (key != 13); } function checkStatus(){ if(sts.value == 'saved'){ self.close(); } } </script> </apex:page>and here is the apex code:
public with sharing class OppEditExt1 { public String sStatus {get; set;} public String sReasonWon {get; set;} Opportunity opp; public OppEditExt1(ApexPages.StandardController controller){ opp = (Opportunity)controller.getRecord(); } public pageReference save(){ try{ opp.Description = sReasonWon; update opp; sStatus = 'saved'; }catch(DmlException d){ sStatus = 'unsaved'; } return null; } }Please check if the saving methodology is following as the code posted else please post your save function. Also keep an eye on your debug logs. They might have anything more to say.