We help IT Professionals succeed at work.

binding event to form in window.open

mmoore
mmoore asked
on
410 Views
Last Modified: 2017-03-08
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.
        // 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);
           });

        });

Open in new window


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);
                                                          
              });
         }

Open in new window


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)">

Open in new window


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">&nbsp;</td><td class="dataCol last empty">&nbsp;</td></tr>

Open in new window


If there is a better way to accomplish my objective, I'm open to scrapping this.

Thanks,
Mike
Comment
Watch Question

Mukesh YadavFull Stack Developer
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Distinguished Expert 2017

Commented:
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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

Commented:
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.

Author

Commented:
This is what I came up with.
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>

Open in new window


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);
                }
           });

Open in new window


Suggestions for improvements are welcome.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
What is the result of running this code? Does it work?

Author

Commented:
Yes, it works! It's not clear how to close this issue. I clicked on Best Solution and Assisted Solution for another. Oh wait, I now see a Next button at the bottom of the screen.

Author

Commented:
Thanks for the help.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.