Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
binding event to form in window.open
I am trying to open a pop-up window which has a form. Eventually the user will close the window, but before that I want to send a form value back to the parent window using localStorage. If I use dev-tools to execute my javascript commands I am successful. So I don't think it's a problem there. I suspect the problem is I am not able to bind the localStorage.setItem to the form on the pop-up.
Here are the relevant bits of code from the parent window.
and
openModal2 is being called by a button on the screen and I know that works because the pop-up opens when the button is clicked.
Here are what I believe are the relevant parts of the pop-up window
and
If there is a better way to accomplish my objective, I'm open to scrapping this.
Thanks,
Mike
Here are the relevant bits of code from the parent window.
// onload
j$(document).ready(function() {
// disable ajax request caching for security best practice
j$.ajaxSetup({ cache: false });
// open modal and query available record types when page loads
openModal();
//
j$(".modalSubmit").click(function(event) {
validateRecordTypeSelected();
});
window.addEventListener('storage',function(event) {
console.log(event);
});
});
and
function openModal2() {
console.log('running openModal2');
var popup = window.open("/apex/wrapwiz", "myWindow", "width=600, height=400, toolbar=no, menubar=no");
j$('popup, #j_id0\\:j_id1\\:i\\:f').bind('submit', function( event ) {
alert( "Handler for .submit() called." );
localStorage.setItem(document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);
});
}
openModal2 is being called by a button on the screen and I know that works because the pop-up opens when the button is clicked.
Here are what I believe are the relevant parts of the pop-up window
<form id="j_id0:j_id1:i:f" name="j_id0:j_id1:i:f" method="post" action="https://c.cs14.visual.force.com/apex/wrapwiz" enctype="application/x-www-form-urlencoded" onkeypress="return FlowLoadingScreen.noenter(event);" onsubmit="FlowLoadingScreen.showLoadingScreen(this)">
and
<td class="labelCol requiredInput"><label class="FlowText" for="j_id0:j_id1:i:f:pb:d:Company.input" id="j_id0:j_id1:i:f:pb:d:Company.prompt"><span class="assistiveText">*</span>Account Name</label></td><td class="dataCol col02"><div class="requiredInput"><div class="requiredBlock"></div>
<input id="j_id0:j_id1:i:f:pb:d:Company.input" maxlength="255" name="j_id0:j_id1:i:f:pb:d:element___input____Company" size="20" type="text" value="" /></div></td><td class="labelCol last empty"> </td><td class="dataCol last empty"> </td></tr>
If there is a better way to accomplish my objective, I'm open to scrapping this.
Thanks,
Mike
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi Mike,
Do you want to submit the form values back to the parent on popup close or/and on form submit, If this is the case you can call a JavaScript method of the parent like this:
You need to move this submit event binding code to pop-up this event binding won't work from the parent:
Do you want to submit the form values back to the parent on popup close or/and on form submit, If this is the case you can call a JavaScript method of the parent like this:
/* Pop-up window code */
function submitDataToParent(data){
if(window.opener != null){
window.opener.methodOfParent(data);
top.close(); /* As the pop-up task is done so, if you want to close the pop-up use this statement. */
}
}
/* Parent window code */
function methodOfParent(data){
console.log("Data: ", data);
}
You need to move this submit event binding code to pop-up this event binding won't work from the parent:
j$('form element selector').bind('submit', function( event ) { /* replace the "form element selector" with the valid form element selector */
alert( "Handler for .submit() called." );
/*localStorage.setItem(document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);*/
submitDataToParent(document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value); /* Add this to send data back to parent */
});
Did you serialize the values of the form into string using JSON.stringify() before close the modal;And after when you want to get these values did you parsing via JSON.parse() the data?
A few things
1. your localstorage call does not include a value to set. Should be
localStorage.setItem('key'
2. I would put the javascript code in the popup
3. bind has been deprecated in favour of .on.
1. your localstorage call does not include a value to set. Should be
localStorage.setItem('key'
2. I would put the javascript code in the popup
<script>
var frm = document.getElementById('j_id0:j_id1:i:f');
frm.addEventListener('submit',function(evt) {
evt.preventDefault();
localStorage.setItem('value', document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);
});
</script>
3. bind has been deprecated in favour of .on.
Hi experts, thanks for the answers. I will be studying and working with each of them over the next 24 hrs. I'll be back.
This is what I came up with.
This is the visualforce page (Salesforce) that wraps the wizard.
This is the bit from the Parent window that captures the event and stuffs it in a field
Suggestions for improvements are welcome.
This is the visualforce page (Salesforce) that wraps the wizard.
<apex:page showheader="false" sidebar="false">
<flow:interview name="New_Account_Wizard"></flow:interview>
<!-- New_Account_Wizard is a multi page flow with a form on each page -->
<!-- so at different stages of the flow the DOM will look different -->
<script>
window.onload = function () {
var frm = document.getElementById('j_id0:j_id1:i:f');
// do this only if the target FORM is on the curent page
if (typeof(frm) != 'undefined' && frm != null)
{
var accountNameField = document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input');
// do this only if the target accountNameField is on the curent page
if (typeof(accountNameField) != 'undefined' && accountNameField != null)
{
// Load the local Storage when the user hits the NEXT button. NEXT button does SUBMIT and goes to next page
frm.addEventListener('submit',function(evt) {
localStorage.setItem('AccountName', document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);
});
}
}
var finishBtn = document.getElementById('j_id0:j_id1:i:f:pb:pbb:finish');
if (typeof(finishBtn) != 'undefined' && finishBtn != null)
{
// override the FINISH button on the last screen of the wizard. If you don't,
// the natural behaviour is to restart the wizard at page one.
finishBtn.addEventListener('click',function(evt2) {
evt2.preventDefault();
window.close();
});
}
}
</script>
</apex:page>
This is the bit from the Parent window that captures the event and stuffs it in a field
window.addEventListener('storage',function(event) {
if (event.key == 'AccountName') { ;
j$(".accountNameField").val(event.newValue);
}
});
Suggestions for improvements are welcome.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial