Add Script Section To Child Window Javascript

StackOverflow https://stackoverflow.com/questions/13261634

Question

I am trying to make a window that pops up, displays a table of addresses, and lets the user click one of the address and send that information back to the parent. My function currently looks like (the else section is where I am having trouble): 

 function ups_address_validation(address1, address2, city, state, zip)
     {
         var address = new Object;
            address.address1 = address1.value;
            address.address2 = address2.value;
            address.city = city.value;
            address.state = state.value;
            address.zip = zip.value;
            var data = {address: address};
            var info = ups_api('validate_address', data);
            if (info.hasOwnProperty('ValidAddressIndicator'))
            {
                $("#" + address1.field).val(info.Candidate.AddressKeyFormat.AddressLine[0]);
                $("#" + address2.field).val(info.Candidate.AddressKeyFormat.AddressLine[1]);
                $("#" + city.field).val(info.Candidate.AddressKeyFormat.PoliticalDivision2);
                $("#" + state.field).val(info.Candidate.AddressKeyFormat.PoliticalDivision1);
                $("#" + zip.field).val(info.Candidate.AddressKeyFormat.PostcodePrimaryLow + '-' + info.Candidate.AddressKeyFormat.PostcodeExtendedLow);
            }
            else
            {
                var candidates = info.Candidate;
                var popup = window.open('', 'Addresses', 'width=850, height=350, scrollbars=1' );
                var html = "<head>" +
                            "<link rel='stylesheet' type='text/css' href='css/style.css' media='screen'></link>" +
                            "<link type='text/css' href='/public/utilities/jquery/css/smoothness/jquery-ui-1.8.22.custom.css' rel='stylesheet'></link>" +
                            "<script type='text/javascript' src='/public/utilities/jquery/js/jquery-1.7.2.min.js'></script>" +  
                            "<script type='text/javascript'> $(document).ready(function(){$('td').click(function(){alert('clicked');})});});</script>" +
                            "</head><body>" +
                            "<div class='wrapper' style='width: 800; background-color: #fff'><div class='content' style='width: 800'>" +
                            "<div class='module_header'>Confirmed Addresses</div><table class='lookup_table' style='width: 800'><tr><th>Address1</th><th>Address2</th><th>City</th><th>State</th><th>Zip</th></tr>";
                var i = 0;
                for (var i in candidates)
                {
                    var row = (i %2)? 'alt': '';
                    html += "<tr class='"+row+"'>";
                    if (info.Candidate[i].AddressKeyFormat.AddressLine instanceof Object)
                        {
                            for (var p in info.Candidate[i].AddressKeyFormat.AddressLine)
                            {
                                html += "<td>" + info.Candidate[i].AddressKeyFormat.AddressLine[p] + "</td>";
                            }
                        }
                    else
                        {
                            html+= "<td>" + info.Candidate[i].AddressKeyFormat.AddressLine + "</td><td></td>";
                        }
                    html +=     "<td>" +
                                    info.Candidate[i].AddressKeyFormat.PoliticalDivision2 +
                                "</td><td>" +
                                    info.Candidate[i].AddressKeyFormat.PoliticalDivision1 +
                                "</td><td>" +
                                    info.Candidate[i].AddressKeyFormat.PostcodePrimaryLow + "-" + info.Candidate[i].AddressKeyFormat.PostcodeExtendedLow +
                                "</td></tr>";
                }
                html += "</table><div class='module_header'>Submitted Address</div><table class='lookup_table' style='width: 800'><tr><th>Address1</th><th>Address2</th><th>City</th><th>State</th><th>Zip</th></tr>";
                html += "<tr><td>" + address1.value + "</td><td>" + address2.value + "</td><td>" + city.value + "</td><td>" + state.value + "</td><td>" + zip.value + "</td><tr></table>";
                html += "</div></div></body>";
                popup.document.write(html);
                $(popup.document).ready(function(){
                    $('td').click(function(){alert('clicked');});
                });
            }


     }

I want to add an onClick event onto each table row with a function that sends that data back to the parent window. However, I have tried the following:

$(popup.document).ready(function(){ $('td').click(function(){ alert('clicked');});});

or using the script section in the

How can I an onclick event to my child window tags (either by passing it to the child window or setting it from the parent) so I can return the information from the table.

Was it helpful?

Solution

You can execute a function in the parent window and send parameters with that function from the newly opened window.

The parent window would then be window.opener, and the function in the parent would be global i.e. in the window scope, and you can call that function from the opened window with window.opener.myFunction(parameters, from, myPopup);

This means that you would write the onclick event handlers in the newly opened window, and on click call a function in the parent window passing along the data of your choosing as a parameter to the function in the parent window.

Here's a DEMONSTRATION

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top