Apex Code Development You need to sign in to do that
Don't have an account?
mattpick1 Popup window communication
Hi,
I was wondering if anyone has had any joy with opening a popup window in salesforce using javascript which they can then communicate with (ie. call javascript functions on the popup from the main window)? At the moment I have a custom link that opens the popup window (a VF page) but then it cannot reference javascript functions on the popup. I think this is because the javascript on the custom link is embedded in the page weirdly...is there another way on the homepage of declaring some javascript in a neat way?
Thank you for your help.
Hi mattpick1;
What kind of communication are you looking for?
See this example:
Main Page:
<apex:page>
<script>
var myWindow;
function pop() {
myWindow = window.open('/apex/secondPage','','width=550,height=450');
}
function showMessage(){
var val = myWindow.document.getElementById('myPage:myForm:myTxtBox').value;
alert(val);
}
</script>
<apex:form>
<apex:commandButton onclick="pop();return false;" value="Show Popup"/>
<apex:commandButton onclick="showMessage();return false;" value="Show Entered Text"/>
</apex:form>
</apex:page>
Second page:
<apex:page id="myPage">
<apex:form id="myForm">
<apex:inputtext id="myTxtBox"/>
</apex:form>
</apex:page>
All Answers
From what I have read, this is either very difficult, or does not work at all.
There are suggestions around using a modal popup based on a hidden div section that might suite your needs.
Check out the article here:
http://wiki.developerforce.com/index.php/Visualforce_Popup
Hi Jim,
I was afraid of that, not had much luck finding info on it. I'll read that article you suggested, thanks for the link.
Matt
Hi mattpick1;
What kind of communication are you looking for?
See this example:
Main Page:
<apex:page>
<script>
var myWindow;
function pop() {
myWindow = window.open('/apex/secondPage','','width=550,height=450');
}
function showMessage(){
var val = myWindow.document.getElementById('myPage:myForm:myTxtBox').value;
alert(val);
}
</script>
<apex:form>
<apex:commandButton onclick="pop();return false;" value="Show Popup"/>
<apex:commandButton onclick="showMessage();return false;" value="Show Entered Text"/>
</apex:form>
</apex:page>
Second page:
<apex:page id="myPage">
<apex:form id="myForm">
<apex:inputtext id="myTxtBox"/>
</apex:form>
</apex:page>
Hi prageeth,
I tried your example but there was no alert shown when I clicked the 'show entered text' command button. Did you get it working?
Thanks
Matt
Hello mattpick1;
I now again checked my code in Firefox, IE and Chrome and worked well.
Try following steps.
1. Create a new Apex page and then copy and paste my first code in it, and save with any name.
2. Create another Apex page and name it as "secondPage".
3. Copy and paste my second code in that page.
4. Now Open first page in browser and click on first button, then the secondPage will be popedup.
5. Then enter any value in to the text box and (no need to press enter key) then click the second button on first page.
The value you entered in the text box will be poped up with Javascript alert.
Still have the problem?
Could you please post the code that you tried?
Hi prageeth,
They're the steps I followed when I set it up the first time. I've tried it in IE and Firefox but no luck, I must be doing something stupid...The new window opens with the text box but no alert appears when I click the command button to the show the text.
"popup" VF page code:
<apex:page id="myPage">
<apex:form id="myForm">
<apex:inputtext id="myTxtBox"/>
</apex:form>
</apex:page>
"main_window" VF page code:
<apex:page >
<script>
var myWindow;
function pop() {
myWindow = window.open('/apex/popup','','width=550,height=450');
}
function showMessage(){
var val = myWindow.document.getElementById('myPage:myForm:myTxtBox').value;
alert(val);
}
</script>
<apex:form >
<apex:commandButton onclick="pop();return false;" value="Show Popup"/>
<apex:commandButton onclick="showMessage();return false;" value="Show Entered Text"/>
</apex:form>
</apex:page>
Can you think of any reason why the popup is opening correctly but it is not updating the alert in the main page? I would love to get this to work!
Thanks
Matt
Hello matt;
Unfortunately your code works in my account with no errors when I copy and paste it to new pages.
In order to get the alert message you need to click the second button without closing the popup window.
But I think you have already done so.
I don't know how to help you. :(
But I am still ready to help you.
I just switched off development mode and it started to work! Crazy, not sure why or why I even tried it!
Thanks so much for your help, this will be a great place for me to start.
Hi prageeth,
Just a quick further question - have you had any luck maintaining a reference to a popup window in the main window even when you have navigated to a new VF page? So the scenario is:
1. Open popup from main page.
2. Communicate with popup window.
3. Navigate to secondary VF page.
4. Communicate with popup window if it is there, otherwise open a new popup window.
The idea is to create a persistent popup window that will be open unless the user closes it, in which case it will be reopened the next time it is needed.
I've tried both the methods listed here:
http://www.1pixelout.net/2005/04/19/cross-window-javascript-communication/
Neither seems to be working unfortunately...
Thanks
Matt
I don't mean to complicate the conversation but here is another simple approach to using popups in a Visualforce page. It works pretty well.
http://www.tehnrd.com/visualforce-pop-up/
Hi TehNrd,
Very nice piece of code, not really what I'm looking for though as the popup is more 'inline'. The reason I want to use a popup is so that it is loaded once and then the main window that laoded it can communicate with it until the user closes it. I thought I'd be able to quite easily maintain the popup reference when the main page is changed but it's not working at all!
Thanks for the link though, I'm sure it'll be useful in the future.
Matt
I managed to solve this by moving all the script into static resources and then referencing it using an <apex:includescript> tag. This moves functions into the header of the generated HTML, something I hadn't considered before when I was simply adding inline <script> tags into my apex markup.
Hi prageeth
i had an issue similar to popup window:
requirement: when an user try to edit account details related to contact ..a popup window should come like "are you sure you want to change Account details related to contact?" if press ok it allows the user to change information otherwise not. so what should we do for this thing...i had a standard UI for contacts and accounts. i am thinking to add a custom button with name like edit account information on contacts page.please help me.