Issue with IE where child window is failing to send variable value back

There is a button on my website that opens a child window displaying a list of images. When the user clicks on an image, values are sent as parameters to a function in the parent window. These parameters are then added to an array variable within the parent window before closing the child window. The code currently works in Chrome and Firefox but encounters issues in IE, particularly IE 9. I would like it to work smoothly in IE 7 as well.

Parent Window Code:

var edge;

function getEdgeProfile(){
    myEdge = window.open('edge.html','','top=50,left=50,width=400,height=400');
}

Child Window Code:

<head>
<script>

function selectEdge(name, price, type){
    opener.edge = [name, price, type];
    window.close();
}

</script>
</head>
<body>

<img src="1.png" width="100px" height="100px" onClick='selectEdge("Square Edge 2mm ARRIS", 30.5, 1)'>
<img src="2.png" width="100px" height="100px" onClick='selectEdge("4 x 4 mm SINGLE BEVEL", 38.56, 1)'>
<img src="3.png" width="100px" height="100px" onClick='selectEdge("4 x 4 mm DOUBLE BEVEL", 46.49, 1)'>
<img src="4.png" width="100px" height="100px" onClick='selectEdge("V JOINT WITH SINGLE PENCIL", 38.56, 2)'>

</body>

I would add a JSFiddle demonstration, but it opens a separate page making it difficult to showcase here. Any assistance or suggestions are greatly appreciated!

Answer №1

After closing the popup, any data assigned within it will be lost, particularly in IE browsers.

To prevent this loss of data, a suggested approach is to have the popup call a function in the parent window with the relevant data as parameters. This function can then store or copy the data into variables within the parent window for safekeeping. Here's how you can implement this (though not yet tested):

Code in Child Window:

function selectEdge(name, price, type){
    opener.setEdge(name, price, type);
    window.close();
}

Code in Parent Window:

function setEdge(name, price, type){
    edge = [name, price, type];
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a stunning horizontal bar chart with the react-d3-components framework

I am currently implementing a D3 chart using the react-d3-components library. So far, I have successfully generated a vertical bar chart. However, my specific requirement is to create a horizontal bar chart. import React from 'react'; import Reac ...

Searching for the row value of specific data within a table using Javascript

I have a PHP table populated with values, and I want to make two of the table data cells editable. The table headers include: Task, Due Date, Staff, and Department. The values in the table data are retrieved from a database using Laravel Eloquent. &l ...

Conceal a script-generated div using CSS styling

Using the code below, you can create an HTML chatbox with a link in the top panel and multiple child divs. The structure is as follows: cgroup is the parent of CBG, which is the parent of CGW, and CGW is the parent of the div I want to hide. How can I u ...

What is the best way to calculate the duration of a .wav file stored locally using JavaScript?

Can you help me figure out how to determine the duration (in milliseconds) of a .wav file using JavaScript for a GreaseMonkey Script? The main challenges I'm encountering are: 1) Accessing local files 2) Retrieving the length of the wav file ...

Adding a dynamic form to each row in a table: A step-by-step guide

https://i.sstatic.net/HctnU.jpg Hey there! I'm facing a challenge with dynamically generated rows in a form. I want to send only the inputs from the selected row when a checkbox is clicked. Can you help me figure this out? I tried using let rowForm ...

Retrieve a data array from a list of checkboxes using JQuery

I am facing an issue with selecting multiple checkboxes in a list. name="campaign_ids" In my jQuery setup, the function looks like this: <script> $('form#manage_campaigns').submit(function(){ var formData = $(this); $.post(site_u ...

Switching Between HTML Using Javascript

I am currently working on an app that allows users to easily check the local weather and temperature in either celsius or fahrenheit. However, I've encountered a problem when trying to switch between the two unit types by simply clicking on the temper ...

Is there a way to fill select boxes with multiple values?

As I set up a jqGrid, I encountered the challenge of visualizing multiple values in one cell. The data is sourced from a form where users can select multiple options. While I managed to display the select box, I struggled with populating it. My attempts to ...

Creating a unique Angular JS / Material / Datatables application - Proper script loading sequence required based on page context

My top two declarations placed above the closing body tag. When used in a material dropdown page, the current order of these scripts works fine. However, when I switch to my datatables page (which is a separate page), I need to swap the order of the two s ...

The size of the array remains static

I seem to be encountering an issue with adding API response data to an array. The array's length remains at 1 and does not reflect the appended responses. After receiving a response from the Watson API, I add it to an array. Subsequently, when I call ...

Using React, update the checkbox so that it dynamically changes from checked to unchecked

Hey there, I'm currently working on a table that includes checkboxes. The idea is that when I click on "Add Entries", a modal opens up; and when I click on "Done", I want the checkboxes to become unchecked without having to refresh the page. Do you ha ...

"The TextInput component in ReactNative is preventing me from inputting any text

Experiencing issues with the iOS and Android simulators. Upon typing, the text disappears or flickers. I attempted initializing the state of the texts with preset values instead of leaving them empty. However, this caused the TextInput to stick to the ini ...

What is the best way to display index.ejs when the input field is blank?

If the input field is left empty when I click the form button, I want to redirect to "/". After clicking the button, the desired URL should be: http://localhost:3000 Header.ejs <form action="/search" method="GET"> < ...

The functionality of jQuery $.fn is not recognized

Why is my code being directly DOWN VOTED? Am I missing something since $.fn. is not functioning correctly? Oddly enough, this functionality works perfectly in another module. I encountered a strange error in jQuery. I am attempting to crop an image using ...

In a set of numbers, one specific number is repeated n/2 times while the remaining n/2 numbers are all different from each other

Given an array of n numbers where one number is repeated n/2 times and the other n/2 numbers are distinct. The task is to find the repeated number with a solution complexity of O(n) using exactly n/2+1 comparisons. The challenge lies in achieving n/2+1 co ...

Tips for resolving the error message "TypeError: Cannot access property 'category' of undefined" while working in a React environment

Hey there, I encountered an issue while trying to destructure in react and can't figure out why the title is appearing as an error message. Below is the code snippet: const {correct_answer, incorrect_answers} = data[0] const arr = [correct_answer, ... ...

What are the best plugins and projects to maximize IntelliJ IDEA's potential for JavaScript development?

I am currently in the process of developing a web application utilizing the MEAN stack: MongoDB, Express, Angular, and Node.js. The foundation of my project is built upon Daftmonk's angular-fullstack Yeoman generator. Despite my primary experience be ...

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

Attempting to choose everything with the exception of a singular element using the not() function in Jquery

Within the mosaic (div #mosaique) are various div elements. My goal is to make it so that when I click on a specific div, like #langages or #libraries, the other divs become opaque while the selected div undergoes a size change (which works correctly in t ...

What is the reason behind receiving the error message "`Foo` only represents a type, but is being treated as a value here" when using `instanceof` in TypeScript?

As the creator of this code interface Foo { abcdef: number; } let x: Foo | string; if (x instanceof Foo) { // ... } Upon running this code, I encountered an error in TypeScript: 'Foo' is recognized only as a type and cannot be used a ...