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
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?
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.